Frontend Academy · レッスン

Mapped Types と Conditional Types

Mapped Types で型のすべてのプロパティを変換し、infer と Conditional Types で高度な型レベルのロジックを構築します。

「Mapped Types と Conditional Types」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

マップ型 — すべてのプロパティを変換

マップ型は、型のキーを反復処理して変換します。Partial、Readonly、Record ユーティリティ型の基盤となる仕組みです。

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

as によるキーの再マッピング

マッピング節で as を使うと、キー名を再マッピングできます。テンプレートリテラル型と組み合わせることで、強力な変換を実現できます。

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

never によるプロパティのフィルタリング

キーの再マッピングで never を返すと、そのプロパティを結果の型から削除できます。

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

条件型 — 型のif/else

条件型は T extends U ? TrueType : FalseType というパターンを使用します。実行時ではなく、型レベルで評価されます。

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

分配条件型

T がユニオン型の場合、条件型は各メンバーに分配されます。string | number extends string ? ... はそれぞれを個別にチェックし、(string extends string ? ...) | (number extends string ? ...) のように評価されます。

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

infer による型の抽出

infer R は、TypeScript が値を埋める型変数を導入します。これにより、型構造の一部を取り出せます。

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

テンプレートリテラル型

テンプレートリテラル型は、テンプレートリテラルと同じバッククォート構文を型レベルで使用し、文字列リテラルの組み合わせからユニオン型を作成します。

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

マップ型と条件型の組み合わせ

TypeScript の最も強力なパターンは、この2つを組み合わせたものです。組み込みの required、partial、readonly、record 型はすべてマップ型です。

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — 再帰的ユーティリティ型

組み込みの Partial は1階層までしか適用されません。DeepPartial はネストされたオブジェクトにも再帰的に適用されます。

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

実際の用途：APIレスポンスの型

マップ型と条件型を使うと、強力なAPIの型導出が可能になります。たとえば、オブジェクトからJSONにシリアライズ可能なプロパティだけを抽出できます。

過度な設計を避ける

複雑な型の技巧は、コードを理解しにくくすることがあります。常に、より単純な型エイリアスやインターフェースのほうが明確ではないかを考えてください。型はTypeScriptの知識を誇示するためではなく、意図をドキュメント化するためのものです。

クイックチェック

T がユニオン型の場合、T extends U ? A : B は何に評価されますか。

復習：マップ型と条件型

マップ型では [K in keyof T] を使ってキーを反復処理します。as を使ってキーを再マッピングできます。never を返すとフィルタリングできます。条件型は T extends U ? A : B です。infer は型変数を抽出します。テンプレートリテラル型は文字列のユニオン型を構築します。これらを組み合わせると、DeepPartial や Asyncify のような強力な型変換を実現できます。

よくある質問

「Mapped Types と Conditional Types」レッスンは無料ですか？

はい。「Mapped Types と Conditional Types」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Mapped Types と Conditional Types」で何を学びますか？

Mapped Types で型のすべてのプロパティを変換し、infer と Conditional Types で高度な型レベルのロジックを構築します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Mapped Types と Conditional Types」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る