aduce ops

TypeScript ユーティリティ型チートシート

Partial / Pick / Omit / Record / Awaited / satisfies / NoInfer 等 20 種類。 Before-After のコード例つき。検索・カテゴリフィルタ対応。

20件

T のすべてのプロパティをオプショナル（?）にします。フォームの初期値や更新用パラメータなど、一部のフィールドだけ渡したい場合に使います。

入力（Before）
interface User {
  name: string;
  age: number;
  email: string;
}

type UpdateUser = Partial<User>;
結果（After）
// 結果
type UpdateUser = {
  name?: string;
  age?: number;
  email?: string;
}
関連:

TypeScript ユーティリティ型チートシートとは

本ツールは、TypeScript が標準で提供する組み込みユーティリティ型20 種類を、Before / After のコード例つきでカテゴリ別に閲覧できる 無料のリファレンスです。Partial や Pick など 日常的に使う型から、TypeScript 5.4 で追加された NoInfer までを網羅。 型名・説明・シグネチャの全文検索とカテゴリフィルタで、目的の型に 即座にアクセスできます。

ユーティリティ型とは

ユーティリティ型は既存の型を変換して新しい型を作るための組み込みヘルパーです。コンパイル時のみ存在し、実行時の JavaScript には影響しません。型の重複定義を減らし、変更に強いコードベース を作るための強力な仕組みです。

カテゴリ別ガイド

変換系（Partial / Required / Readonly）

既存型の各プロパティの修飾子を一括で変える型です。Partial は全てをオプショナルに、Required は 全てを必須に、Readonly は全てを読み取り専用にします。 フォームの部分更新、コンフィグの完全版、状態の凍結などで頻出します。

抽出・除外系（Pick / Omit / Extract / Exclude）

Pick / Omit はオブジェクト型のキー集合から、Extract / Excludeはユニオン型のメンバー集合から、それぞれ一部を取り出すか除外します。 API レスポンスから必要フィールドだけ取る、新規作成リクエストから id を除く、といった用途で使います。

マッピング（Record）

Record<K, V> はキー型 K と値型 V からオブジェクト型を 生成します。文字列リテラルユニオンから辞書型を作る場面で重宝します。

Null 制御（NonNullable）

NonNullable<T> は T から null と undefined を除外します。 オプショナル値を必須化したいときの型側のフィルタとして使います。

関数・クラス系（ReturnType / Parameters / Awaited / ConstructorParameters / InstanceType）

既存の関数・クラスから派生型を引き出す型群です。typeof getUser のように typeof 演算子と組み合わせて 既存実装から型を導出するパターンが定番です。Awaited は Promise の解決後の型を取得し、async/await の戻り値の型推論に 使われています。

文字列系（Uppercase / Lowercase / Capitalize / Uncapitalize）

文字列リテラル型の大文字・小文字を変換します。 テンプレートリテラル型と組み合わせると、API パスや CSS 変数名のような 文字列構造を型レベルで安全に扱えます。

最新構文（satisfies / NoInfer）

satisfies（TS 4.9）は「式を型に適合させつつ、推論された 詳細な型を保持」する演算子です。as は型を強制的に変える（情報損失あり） のに対し、satisfies はチェックだけ行います。NoInfer（TS 5.4）はジェネリクスの型推論を制御するヘルパーで、 特定の引数からの推論をブロックします。

よく使う組み合わせ

  • Partial<Pick<User, "name" | "email">>— 特定フィールドだけオプショナルに
  • Omit<User, "id"> & { createdAt: Date }— id を除外して別フィールドを追加
  • Record<string, Partial<Config>>— 任意キーを許容する設定の辞書型
  • ReturnType<typeof handler>— 既存関数の戻り値の型を取得

TypeScript vs JavaScript

JavaScript は動的型付け、TypeScript は静的型付けを追加した言語です。 ユーティリティ型はコンパイル時にのみ存在し、 トランスパイル後の JavaScript には残りません。型レベルの抽象化を活用すれば、 ランタイムコストを増やさずに型安全性と開発体験を大きく向上できます。

学習リソース

  • TypeScript 公式ハンドブック — 言語仕様の決定版
  • Type Challenges — 型パズル集。条件型・推論の理解に最適
  • TypeScript Playground — ブラウザで型を試せる公式環境
  • RELEASES（GitHub） — 各バージョンの追加機能を追う

落とし穴・注意点

  • Pick / Omit のキー指定はリテラル型: 動的に組み立てた string 変数は使えません。as const や リテラルユニオンを使います
  • Partial は深さ 1 段だけ: ネストした型は再帰的に オプショナルになりません。DeepPartial のような 自前実装が必要です
  • Readonly も浅い: 配列要素のミューテーション （arr[0] = ...）は防げますが、要素自体のプロパティ変更は防げません
  • satisfies と as の使い分け: 「型を変える」なら as、 「適合チェックのみ・推論を保持」なら satisfies

関連ツール

プライバシー

操作内容はすべてブラウザ内で処理され、弊社サーバには送信しません。 コピーした内容もクリップボードに直接書き込まれます。

関連ツール