TypeScriptの設定の良し悪しYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
TypeScriptの導入にあたって考慮すべきメリットとコスト
皆さんこんにちは。京都開発室のLinです。仕事と個人的なプロジェクトでTypeScriptによる開発を始めて約2年が経ちましたので、 TypeScript導入時の経験を皆さんにお話ししたいと思います。 近年、TypeScriptはフロントエンド分野で最も注目を集める技術となっています。The State of JavaScriptの資料によれば、TypeScriptの使用を選択する開発者は増加を続けており、その評価も肯定的なものが多いようです。 「次のプロジェクトではTypeScriptにより開発を行うべきだ」「今あるJavaScriptプロジェクトをTypeScript仕様に変更すれば、プロジェクト品質の向上につながる」と考えているチームは数多くあるでしょう。 しかしながら、TypeScript導入のコストおよびメリットについては、極めて慎重に評価を行う必要があると、私は考えています。
TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった - 毎日へっぽこ
TypeScript 3.7以降で使える ?? 演算子。 || 演算子より厳密に undefined や null を判定してくれるので多用していたが、こいつの名前は何だろうと思って調べてみたところ、Nullish Coalescing Operator、日本語だとNull結合演算子というらしい。 ついでに、 ?. で undefined または null な参照の場合に、エラーではなく undefined にしてくれる、RubyでいうところのNull条件演算子は、 Optional Chaining Operatorというらしい。 どちらもECMAScript2020で追加された構文で、主要ブラウザの最新版や、Node.js v14からはJavaScriptでも使えるようになっているのでメモ。 Nullish Coalescing Operator(Null結合演算子) Optional
TypeScript 入門 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。新卒のid:w1pと申します。 今回業務でTypeScriptを導入するということで、いい機会なのでTypeScriptについていろいろ調べました。 目次 環境構築 TypeScriptの基本的な文法 型アノテーションの書き方 基本の型 number型 bigint型 string型 boolean型 symbol型 null型 undefined型 型エイリアスで型に別名をつける リテラル型 複合型 object型 array型 tuple型 enum 数値型enumの注意点 class Union型 Intersection型 その他の型 Function型 Index Signitures 特殊な型 any unknown void never インターフェースと型エイリアス インターフェース 2つの違い 宣言のマージ プリミティブ型とUnion型 その他 ジェネリクス
この TypeScript が Hello, world! のくせに慎重すぎる - Qiita
この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。
When to use JSX.Element vs ReactNode vs ReactElement?
I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components. I have always used JSX.Element as the return type, now this doesn't work any more if a component decides to not render anything, i.e. returns null, since null is not a valid value for JSX.Element. Th
雰囲気で使わない @types/react - Qiita
@types/react の型定義を雰囲気で使っている皆さん、こんにちは。React コンポーネントを書くときはどの型を使い、どう書くべきか？という疑問を Twitter でお見かけし、雰囲気で使っていた私も気になったので @types/react の中身を覗いてみました。 master に入り、いよいよリリース間近な Hooks。本稿は FC(旧SFC) の話が前提です。VScode で型付けをしようとすると、似たような型が山ほど出てきて、どれを使うのが適切なのか・違いが何なのか…パッと見分かりませんね。 ReactNode ReactChild ReactElement StatelessComponent FunctionComponent JSX.Element SFC FC という訳で、こんな Props を持っているコンポーネントの各種書き方を比較、白黒ハッキリさせていきたいと
TypeScript: ReactNode型とReactElement型とReactChild型 - dackdive's blog
メモ。 ReactNode ReactElement ReactChild の関係性、何回か調べている気がするので整理しておく。 @types/react の型定義 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts を参照した。 図で、ReactNodeArray → Array<ReactNode> 以外の線は Union Types を表している。 たとえば type ReactChild = ReactElement | ReactText である。 メモ JSX が受け付けるすべてのものをまとめた type として ReactNode があり、そこから string や null などを除いた純粋な React コンポーネントを意味するのが ReactEleme
tsdでTypeScriptの型定義とテストで戦う
この記事はTypeScript Advent Calendar 2019 の 16日目の記事です。 「Mapped types」,「Conditional Types」などTypeScriptの型システムは高機能です。 しかし、高機能がゆえに複雑で直感的には分かりくい型を生み出していることも事実です。 TypeScriptの型定義は型を返す関数として扱うことができ、型がバグを生み出す原因にもなります。 そんな型でのバグをなくすために型のユニットテストを紹介します。
【TypeScript】Utility Typesをまとめて理解する - Qiita
Utility Typesとは Utility Typesとはコード内で型変換を容易にする為にTypeScriptが提供する(便利な関数のような)型達です。 Partial<T> Partial<T>はTの全てのプロパティをOptional(任意)のプロパティにしてくれます。 下記のコードPersonでは１つも任意のプロパティが設定されていませんが、Partial<T>を使用する事で、変数taroではfirstNameのみを持つ事ができています。 interface Person { firstName: string lastName: string age: number } const taro: Partial<Person> = { firstName: 'Taro', } console.log(taro); //=> { firstName: 'Taro' } Require
ユーティリティ型 (Utility Types) - サバイバルTypeScript
TypeScriptで開発するということはJavaScriptに型を付与することです。型を付与する時にあらかじめ用意されている便利な型の表現がいくつかありますのでそちらを紹介します。今回紹介するものは全てではないので、他も興味がある方は公式やソースコードを参照してください。 これから紹介するユーティリティ型は全てTypeScriptのパッケージで定義されており、ソースコードも同梱されているのでその実装方法を見ることが可能です。 本章のユーティリティ型の仕様例で、ことわりなくPerson, Userというオブジェクトを使用している部分は、下記に示すタイプエイリアスとそのオブジェクトを使うものとします。
Documentation - Utility Types
TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally. Awaited<Type> Released: 4.5 This type is meant to model operations like await in async functions, or the .then() method on Promises - specifically, the way that they recursively unwrap Promises. Example
TypeScriptの便利な型コレクションtype-festと型パズル解説~前編~ - 別にしんどくないブログ
TypeScript Advent Calendar 2019 - Qiita 14日目の記事です。 type-festというTypeScriptの便利な型を集めたnpmパッケージがあります。 今回はtype-festの中から特に複雑なUtilitiesの型の紹介とそれらの型パズルのような型定義について解説したいと思います。 この記事がMapped TypesやConditional Typesを使った複雑な型パズルの理解への一助になれば幸いです。 github.com 長いので前後半に分けました。後半はまた後日公開します。 前提知識 Utility Types Mapped Typesを利用したUtility Types Conditional Typesを利用したUtility Types type-fest Except Mutable Merge MergeExclusive Re
GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
TypeScript初心者がtype-challengesに挑戦してみた
はじめに こんにちは。高校2年の樅山です。 2020/11 から始まった、ものづくりをする高校生のための新しいグループ、「Palettte」が主催する Palettte Advent Calendar 2020 の8日目の記事となります。 皆さんは type-challenges をご存知ですか？ 私は、Web開発に型を最低限付ける程度にしかTypeScriptを使ってきませんでしたが、複雑なデータを示す型を作り出せる開発者に憧れるようになったので、以前Twitterで話題になった「TypeScriptの型を使った問題」に挑戦していきたいと思います。 事前に私がこのパズルを解く前に知っていた型の知識としては、 文字型, 文字列型, 整数型, 浮動小数点型, 真偽値型などの基本的な型 Array, Objectなどの基本的なデータ構造の型 Readonly Union Type Distin
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
TypeScriptでMapped Typesを使ってきれいなインターフェースを作る話 - Qiita
みなさんこんにちは。この記事はTypeScript Advent Calendar 2020の5日目の記事です。 TypeScriptにはintersection typeという機能があります。これはT & Uのような構文をもつ型であり、意味としては「TでもありUでもある型」です。 構造的部分型とIntersection Type 「TでもありUでもある」という説明の仕方をされるとIntersection Typeが何の役に立つのかピンと来ないという方がいるかもしれません。実際のところ、Intersection Typeはオブジェクト型を合体するという役割によく使われます。 例えば、Tが{ foo: string }型でUが{ bar: number }型だった場合、T & Uは実質上{ foo: string; bar: number }型となります。 type T = { foo: s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node Target Mapping
Extending Union Types Alias in TypeScript?
GitHub - sindresorhus/type-fest: A collection of essential TypeScript types
