TypeScriptユーティリティ型リファレンス
TypeScript組み込みユーティリティ型をすべてブラウズ、検索、実験できます。コード例、構文、一般的なユースケースを含みます。
このツールについて
TypeScriptユーティリティ型リファレンスは、TypeScriptに組み込まれている すべてのユーティリティ型の包括的で検索可能なガイドです。公式ハンドブックと エディタを行き来する代わりに、20以上のユーティリティ型を1か所で閲覧でき、 構文定義、入力型と結果型を示す注釈付きコード例、分類された一般的な ユースケースが含まれています。
TypeScriptのユーティリティ型は、言語に組み込まれたジェネリック型変換です。
コードを複製せずに既存の型から新しい型を導出できます。例えば、
Partial<T>はすべてのプロパティをオプショナルにし、Pick<T, K>は
特定のプロパティを選択し、Omit<T, K>はそれらを削除します。
これらの型を理解することは、慣用的なTypeScriptを書き、コードベースを
DRYに保つために不可欠です。
リファレンスは4つのカテゴリに分類されています：Object Types（Partial、 Required、Readonly、Pick、Omit、Record）、Union Types（Exclude、Extract、 NonNullable、Awaited）、Function Types（ReturnType、Parameters、 ConstructorParameters、InstanceType、ThisParameterType、OmitThisParameter）、 String Types（Uppercase、Lowercase、Capitalize、Uncapitalize）。
すべての処理はブラウザ内で完結します。データがサーバーに送信されることは ありません。プレイグラウンドエリアでは型定義を書いて、使用しているユーティリティ 型とその動作の説明を確認できます。学習ツールとしても日常のリファレンスとしても 有用です。
JSONデータからTypeScriptインターフェースを生成する必要がある場合は、 JSON to TypeScriptコンバーターをお試しください。 ランタイムバリデーションスキーマには、 JSON to Zodコンバーターが便利です。
使い方
- ユーティリティ型の全リストをブラウズするか、検索バーを使用して名前や説明で特定の型を検索します。
- カテゴリボタン（Object Types、Union Types、Function Types、String Types）をクリックしてフィルタリングします。
- 各カードには型名、構文、説明、入力型、結果型が並んで表示されます。
- 結果型の例のCopyボタンをクリックしてクリップボードにコピーします。
- ページ下部のPlaygroundセクションにスクロールして、独自の型定義を書きます。
- Analyze Typesをクリックして、使用したユーティリティ型とその説明を確認します。
TypeScriptユーティリティ型の人気サンプル
よくある質問
TypeScriptユーティリティ型とは何ですか？
ユーティリティ型は、TypeScriptに組み込まれた一般的な型変換を行うジェネリック型です。既存の型から新しい型を作成できます -- 例えば、すべてのプロパティをオプショナルにする（Partial）、特定のキーを選択する（Pick）、関数の戻り値の型を抽出する（ReturnType）など。インポートなしでグローバルに利用できます。
データは安全ですか？
はい。すべての処理はJavaScriptを使用してブラウザ内で完全に実行されます。データがサーバーに送信されることはありません。ブラウザの開発者ツールのNetworkタブで確認できます。
複数のユーティリティ型を組み合わせて使えますか？
もちろんです。ユーティリティ型は合成できます。例えば、Readonly<Partial<User>>はすべてのプロパティがオプショナルかつreadonlyの型を作成します。Pick<Required<Config>, 'host' | 'port'>はすべてを必須にした後で特定のキーを選択します。
これらのユーティリティ型にはどのTypeScriptバージョンが必要ですか？
Partial、Required、Readonly、Pick、Omit、Record、Exclude、Extract、NonNullable、ReturnType、InstanceType、Parametersなどのほとんどのユーティリティ型はTypeScript 2.1-3.xから利用可能です。AwaitedはTypeScript 4.5で追加されました。文字列操作型（Uppercase、Lowercase、Capitalize、Uncapitalize）はTypeScript 4.1で追加されました。
PickとOmitの違いは何ですか？
Pick<T, K>はTから特定のキーを選択して新しい型を作成します。Omit<T, K>はTから特定のキーを除外して新しい型を作成します。これらは補完的です -- Pickはリストされたキーのみを含み、Omitはリストされたキーを除外して残りをすべて保持します。
Playgroundはどのように動作しますか？
Playgroundでは、TypeScriptの型定義を書くことができるテキストエリアを提供します。Analyze Typesをクリックすると、入力を解析してtypeやinterfaceの定義を検出し、使用した組み込みユーティリティ型（Partial、Pick、Omitなど）を特定し、それぞれの説明を表示します。完全なTypeScriptコンパイラではなく、静的分析ツールです。