TypeScriptは、静的型付けによってJavaScriptのコードをより安全で予測可能なものにします。しかし、複雑なアプリケーションを構築していくと、型の再利用や拡張が必要になる場面が多々あります。そこで役立つのが、TypeScriptのMapped Typesです。Mapped Typesは、既存の型をベースに新しい型を生成する機能で、複雑な型操作をシンプルに行える強力なツールです。本記事では、このMapped Typesを活用して、型の効率的な拡張方法や実際の使用例を詳しく解説していきます。
Mapped Typesとは何か
Mapped Typesとは、TypeScriptで既存の型をもとに新しい型を作成するための機能です。基本的に、元の型の各プロパティをマッピングして、新しい型のプロパティを定義します。これにより、型の再利用や拡張が容易になり、コードの保守性が向上します。
活用シーン
Mapped Typesは、既存の型を変換する際に特に有用です。たとえば、すべてのプロパティをオプショナル（任意）にしたい場合や、読み取り専用にしたい場合に頻繁に使われます。これにより、コードの冗長さを排除しつつ、柔軟で強力な型定義が可能になります。
TypeScript標準のMapped Types
TypeScriptでは、すでにいくつかの標準的なMapped Typesが提供されています。代表的なものにPartial、Readonly、Required、Pickなどがあります。これらのユーティリティ型は、既存の型から特定のルールに従って新しい型を生成する際に便利です。
Mapped Typesの構文
Mapped Typesを使うための基本的な構文は非常にシンプルです。元になる型のプロパティに対してループのようにマッピングを行い、新しい型を作成します。以下は、Mapped Typesの基本構文です。
type MappedType<T> = {
[P in keyof T]: T[P];
};構文の詳細
Tは元になる型です。keyof Tは、型Tのすべてのプロパティ名をUnion型として取得します。[P in keyof T]は、元の型のプロパティをループし、新しい型の各プロパティに対応させることを意味します。T[P]は、型TのプロパティPの型を指します。
これにより、元の型Tのプロパティを新しい型にそのままマッピングすることが可能です。
応用例：Partial型の構築
たとえば、すべてのプロパティをオプショナルにするPartial型を自作する場合、以下のように定義できます。
type MyPartial<T> = {
[P in keyof T]?: T[P];
};この例では、[P in keyof T]?の?がプロパティをオプショナルにしており、元の型をそのまま拡張するのではなく、より柔軟な型を生成しています。
Union型とMapped Typesの関係
Mapped Typesは、Union型と組み合わせることでさらに強力になります。Union型は複数の型のいずれかを表し、Mapped Typesを用いることで、Union型を利用して柔軟に型の変換や操作を行うことが可能です。これは、特に複数のプロパティが異なる型を持つ場合や、条件付きの処理を行いたい場合に非常に役立ちます。
Union型とは
Union型は、TypeScriptにおいて複数の型を組み合わせて「いずれかの型である」ことを示す型です。例えば、string | numberは、文字列または数値のどちらかの型を取ることを表します。
type StringOrNumber = string | number;Mapped TypesでUnion型を使用する
Union型は、Mapped Typesのプロパティとしても使用できます。たとえば、プロパティが複数の型（例えばstring | number）を取り得る場合、それをMapped Typesで操作することが可能です。以下の例では、Union型を持つプロパティに対してすべてのプロパティを読み取り専用にしています。
type MyReadonly<T> = {
[P in keyof T]: T[P] extends string | number ? Readonly<T[P]> : T[P];
};この例では、プロパティPがstringまたはnumberであれば、Readonly型を適用しています。このように、Union型とMapped Typesを組み合わせることで、条件付きで特定の型変換を行うことができ、柔軟性が増します。
Union型を使った応用例
次の例では、複数の型（string | number）を含むプロパティを持つ型をMapped Typesで操作し、すべてのプロパティの型をstringに変換しています。
type ConvertToString<T> = {
[P in keyof T]: string;
};
type OriginalType = {
name: string;
age: number;
};
type NewType = ConvertToString<OriginalType>;
// NewTypeは { name: string; age: string; }この例では、OriginalTypeのすべてのプロパティをstring型に変換しています。Union型を使うことで、プロパティごとの型操作や変換が容易に行えるようになります。
Conditional Typesと組み合わせた応用例
Conditional Typesは、型に応じて条件分岐を行うことで、柔軟で複雑な型定義を可能にする強力な機能です。Mapped TypesとConditional Typesを組み合わせることで、型ごとに異なる処理を施す高度な型変換が可能になります。
Conditional Typesの基本構文
Conditional Typesは、次のような構文で定義されます。
T extends U ? X : Yここで、TがUに代入可能であればXが結果として使われ、そうでない場合はYが使われます。このようにして、型の条件分岐を表現できます。
Conditional TypesとMapped Typesの組み合わせ
Mapped TypesとConditional Typesを組み合わせることで、型ごとに特定の操作を行うことが可能になります。以下は、プロパティの型がstringの場合はstring[]に変換し、それ以外は元の型を維持する例です。
type ConvertToArray<T> = {
[P in keyof T]: T[P] extends string ? string[] : T[P];
};
type OriginalType = {
name: string;
age: number;
};
type NewType = ConvertToArray<OriginalType>;
// NewTypeは { name: string[]; age: number; }この例では、OriginalTypeのnameプロパティはstring[]型に変換され、ageプロパティはそのままnumber型として残っています。Conditional Typesを使うことで、プロパティごとに異なる型操作を行う柔軟性が得られます。
応用例：ネストされた型の変換
Conditional Typesは、ネストされた型にも適用できます。たとえば、オブジェクトのプロパティがさらにオブジェクトである場合、それらのプロパティにもMapped Typesを適用することができます。
type DeepReadonly<T> = {
[P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : Readonly<T[P]>;
};
type NestedType = {
user: {
name: string;
age: number;
};
isActive: boolean;
};
type ReadonlyNestedType = DeepReadonly<NestedType>;
// ReadonlyNestedTypeは { user: { name: string; age: number }; isActive: boolean }この例では、NestedTypeのuserオブジェクト内のプロパティも再帰的にReadonly型へと変換されます。条件分岐を使用することで、オブジェクトのネストレベルに関係なく型変換を行うことが可能です。
Conditional Typesの注意点
Conditional Typesは非常に柔軟ですが、複雑な型定義になるとTypeScriptの型推論に負荷がかかることがあります。したがって、パフォーマンスに影響を与えないように、使用する際には必要最低限の範囲で設計することが推奨されます。
このように、Conditional TypesをMapped Typesと組み合わせることで、型ごとの細かい条件付き処理や複雑な型操作を簡潔に行えるようになります。
既存の型に対するPartial, Readonlyの使用
TypeScriptには、既存の型を簡単に拡張するための便利なユーティリティ型が用意されています。その中でも、特に頻繁に使用されるのがPartialとReadonlyです。これらのユーティリティ型を使用することで、既存の型を柔軟に操作し、さまざまなシナリオに対応することができます。
Partial型の使用
Partial型は、既存の型のすべてのプロパティをオプショナル（undefinedを許容する）にするために使われます。これにより、特定のプロパティを必須としないオブジェクトを柔軟に扱うことができます。
type User = {
name: string;
age: number;
email: string;
};
type PartialUser = Partial<User>;上記の例では、User型のプロパティ（name、age、email）はすべてオプショナルになります。これにより、次のように部分的にプロパティが省略されたオブジェクトを許容します。
const user: PartialUser = {
name: "John",
};Partial型は、特に大規模なオブジェクトの一部のプロパティを操作したい場合や、フォームの一部の値がまだ未入力の場合などに非常に便利です。
Readonly型の使用
Readonly型は、既存の型のすべてのプロパティを読み取り専用（readonly）にするために使われます。これにより、一度値が設定されたプロパティが後から変更されることを防ぐことができます。
type ReadonlyUser = Readonly<User>;ReadonlyUser型では、次のようにプロパティがすべて読み取り専用になっています。
const readonlyUser: ReadonlyUser = {
name: "Alice",
age: 30,
email: "alice@example.com",
};
// readonlyUser.name = "Bob"; // エラー: nameプロパティは変更不可このように、Readonly型を使うことで、オブジェクトの不変性を確保し、予期せぬ変更を防ぐことができます。
PartialとReadonlyを組み合わせる
PartialとReadonlyは、組み合わせて使用することも可能です。例えば、次のように、部分的にオプショナルで、かつ変更不可の型を定義できます。
type PartialReadonlyUser = Partial<Readonly<User>>;このPartialReadonlyUser型は、すべてのプロパティがオプショナルであり、さらに読み取り専用です。このような型は、特定のオブジェクトが部分的に入力され、かつその後の変更を許さないような場面で役立ちます。
ユーティリティ型の活用例
次のような場面で、PartialやReadonly型を活用できます。
- フォームデータの一部入力が完了している状況を扱うために
Partialを使用 - 設定データや環境変数のように、不変性を持たせたいオブジェクトに
Readonlyを適用
これらのユーティリティ型を活用することで、コードの保守性が向上し、より安全で柔軟な型操作が可能になります。
Mapped Typesを用いたカスタムユーティリティ型の作成
TypeScriptのMapped Typesを活用すると、プロジェクト特有のユーティリティ型を作成して、コードの柔軟性や再利用性を大幅に向上させることができます。これにより、複雑な型変換や特定の条件に基づく型操作を簡潔に行うことができます。
カスタムユーティリティ型とは
カスタムユーティリティ型とは、TypeScriptの基本型や標準のユーティリティ型（Partial、Readonlyなど）では対応できない、特定の目的に合わせた型定義です。これらは、プロジェクトごとのニーズに合わせて、型の変換や制約を追加することで、より効率的に型操作を行うために使われます。
プロパティの値をnullに変換する型
以下の例では、すべてのプロパティの型をnullに変換するカスタムユーティリティ型を作成します。
type Nullable<T> = {
[P in keyof T]: T[P] | null;
};このNullable型を使用すると、既存の型のすべてのプロパティにnullを許容するようになります。
type User = {
name: string;
age: number;
};
type NullableUser = Nullable<User>;
// NullableUserは { name: string | null; age: number | null; }このように、User型のnameとageプロパティはnullを持つことができる型に変換されています。これにより、例えばAPIのレスポンスがnullを含む場合などに対応できます。
特定のプロパティだけをOptionalにする型
次の例では、特定のプロパティだけをオプショナルにするカスタム型を作成します。Kで指定したプロパティのみオプショナルにし、それ以外のプロパティはそのまま維持します。
type MakeOptional<T, K extends keyof T> = {
[P in K]?: T[P];
} & {
[P in Exclude<keyof T, K>]: T[P];
};この型は、指定したプロパティだけをオプショナルにし、他のプロパティは元の型のままにしておきます。
type User = {
name: string;
age: number;
email: string;
};
type OptionalEmailUser = MakeOptional<User, "email">;
// OptionalEmailUserは { name: string; age: number; email?: string }このMakeOptional型を使うことで、User型のemailプロパティだけをオプショナルにし、nameとageは必須のままとなります。このテクニックは、部分的にオプショナルなオブジェクトを扱う際に非常に便利です。
Deep Partial型の作成
次に、オブジェクトのネストされたプロパティもすべてオプショナルにするDeepPartial型を作成します。これは、オブジェクト内のプロパティがさらにオブジェクトである場合に、それらもすべてオプショナルにするために使われます。
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};この型は、再帰的にすべてのネストされたプロパティをオプショナルにします。
type NestedUser = {
name: string;
address: {
city: string;
postalCode: number;
};
};
type PartialNestedUser = DeepPartial<NestedUser>;
// PartialNestedUserは { name?: string; address?: { city?: string; postalCode?: number } }このDeepPartial型を使えば、ネストされたオブジェクトのプロパティも含めてすべてのプロパティがオプショナルになります。これにより、大規模なオブジェクトや深くネストされた構造でも柔軟に操作できます。
応用例：カスタム型を使用したAPIレスポンスの型定義
これらのカスタムユーティリティ型は、APIレスポンスの型定義に特に役立ちます。APIレスポンスはしばしばオプショナルなプロパティや、nullを含むケースがあるため、NullableやPartialのような型は、そのまま使えるユーティリティ型です。また、ネストされたデータ構造がある場合、DeepPartial型を利用することで、部分的なレスポンスにも対応できる柔軟な型定義が可能になります。
こうしたカスタムユーティリティ型を使うことで、TypeScriptの型システムをより柔軟に扱え、実際のプロジェクトの要件に応じた型定義が簡単に行えるようになります。
Mapped Typesの制限と注意点
Mapped Typesは非常に強力な機能ですが、使用する際にはいくつかの制限や注意点があります。これらを理解しておくことで、意図しない動作やパフォーマンスの問題を防ぎ、より効果的にMapped Typesを活用できるようになります。
型の再帰に関する制限
TypeScriptでは、再帰的な型定義が可能ですが、再帰が深すぎる場合には型の評価が行われず、コンパイルエラーが発生することがあります。たとえば、ネストされたオブジェクトを再帰的に処理するDeepPartialのような型を使う場合、ネストの深さに制限があることに注意が必要です。
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};この型は、深いネスト構造を持つオブジェクトに対して再帰的に処理を行いますが、あまりにも深い場合、TypeScriptの型チェックが追いつかずにコンパイルエラーになることがあります。そのため、複雑な再帰型を使用する際には、無限ループのような事態を避けるため、型の設計を工夫する必要があります。
Conditional Typesとの組み合わせによる複雑性
Conditional TypesとMapped Typesを組み合わせると非常に強力な型操作が可能になりますが、その分複雑さも増します。特に、条件が複雑になるとTypeScriptの型推論が困難になり、理解しにくいエラーメッセージが出力されることがあります。次のような条件付き型をMapped Typesで扱う場合、コードの可読性が低下する可能性があります。
type ComplexConditional<T> = {
[P in keyof T]: T[P] extends string ? number : T[P] extends number ? string : T[P];
};このような複雑な型定義では、TypeScriptの推論エンジンがエラーを検出するのが難しくなり、デバッグに時間がかかることがあります。そのため、条件付きの型定義はシンプルに保つことが推奨されます。
キーのリマップがサポートされていない
Mapped Typesは、既存の型のプロパティを操作できますが、プロパティ名をリマップ（名前を変更）することはできません。つまり、keyofで得たプロパティ名を別の名前に変換することはできないため、以下のような操作はサポートされていません。
type RemapKeys<T> = {
[P in keyof T as NewKey]: T[P]; // コンパイルエラー
};キーのリマップを行うには、TypeScript 4.1以降のas句を使った型操作を行う必要がありますが、それでもリマップには制限があるため、慎重に設計する必要があります。
パフォーマンスへの影響
非常に複雑なMapped Typesや再帰的な型定義は、TypeScriptの型チェックのパフォーマンスに影響を与えることがあります。特に、複数のユーティリティ型をネストして使う場合、コンパイルに時間がかかることがあります。以下のようなケースでは、コンパイル速度が低下することがあります。
type ComplexType<T> = {
[P in keyof T]: T[P] extends object ? DeepPartial<T[P]> : T[P];
} & {
[P in keyof T]: Readonly<T[P]>;
};このように複数の型操作を同時に行う場合、型システムが追いつかずにパフォーマンスが低下することがあるため、ユーティリティ型を使いすぎないように注意しましょう。
型の肥大化による可読性の低下
Mapped Typesは非常に柔軟で強力ですが、過度に使用するとコードが複雑になり、可読性が低下する可能性があります。特に、型定義が複数のMapped TypesやConditional Typesを含む場合、型の全体像を把握するのが難しくなります。そのため、Mapped Typesを使用する際には、過度に複雑な型操作を避け、できるだけシンプルに保つことが重要です。
制約を考慮したMapped Typesの使用
Mapped Typesを使う際には、その強力さを享受する一方で、制約やパフォーマンスに注意を払うことが重要です。適切に使用すれば、コードの再利用性や保守性を高めることができますが、複雑すぎる型定義はかえってバグの原因となることがあります。制限を理解し、慎重に設計することで、効率的かつ効果的な型定義を実現できます。
高度な型操作をシンプルにするテクニック
TypeScriptの型システムは非常に強力で、複雑な型操作が可能です。しかし、複雑な型を扱うと、型定義が肥大化し、可読性やメンテナンス性が低下することがあります。そこで、ここでは高度な型操作をシンプルに保ちながら、効率的に扱うためのテクニックをいくつか紹介します。
型エイリアスで複雑な型を分割する
複雑な型定義は、型エイリアスを使って分割し、読みやすく保つことができます。型エイリアスを使うことで、長い型定義を複数の小さなパーツに分割し、それぞれの役割を明確にすることができます。
type User = {
name: string;
age: number;
address: {
city: string;
postalCode: number;
};
};
type Address = User['address']; // Address型を別に定義このように、ネストされた型や条件付き型を別のエイリアスとして定義することで、メインの型定義がシンプルになります。また、エイリアスを使えば再利用もしやすくなり、他の場所で同じ型を繰り返し使う際に非常に便利です。
組み込みのユーティリティ型を活用する
TypeScriptには、多くの組み込みユーティリティ型が提供されており、これらを活用することで複雑な型操作を簡素化できます。以下に、よく使われるユーティリティ型をいくつか紹介します。
Partial<T>：すべてのプロパティをオプショナルにします。Required<T>：すべてのオプショナルプロパティを必須にします。Readonly<T>：すべてのプロパティを読み取り専用にします。Pick<T, K>：指定したプロパティのみを抜き出します。Omit<T, K>：指定したプロパティを除外します。
たとえば、PickとOmitを組み合わせると、必要なプロパティを操作しながらシンプルに型を再定義できます。
type Person = {
name: string;
age: number;
email: string;
};
type NameAndEmail = Pick<Person, 'name' | 'email'>;
type WithoutEmail = Omit<Person, 'email'>;条件付き型のロジックを簡潔に保つ
Conditional Types（条件付き型）を使うと複雑な型変換が可能ですが、条件式が増えると読みづらくなります。そのため、条件をシンプルにするために、extendsを使った基本的なロジックを維持することが重要です。
type IsString<T> = T extends string ? true : false;
type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false複雑な条件式を複数使う場合は、部分ごとに型エイリアスを分割し、可読性を保つと良いです。
Mapped Typesに型制約を追加する
Mapped Typesに型制約（extends句）を追加することで、特定の条件を満たす型に対してのみ操作を行うように制限することができます。これにより、誤った型の操作を防ぎ、型定義がより明確になります。
type FilterStringProps<T> = {
[P in keyof T]: T[P] extends string ? T[P] : never;
};
type User = {
name: string;
age: number;
email: string;
};
type StringOnlyUser = FilterStringProps<User>;
// StringOnlyUserは { name: string; age: never; email: string }この例では、User型のすべてのプロパティからstring型のプロパティだけを残し、他の型にはneverを適用しています。このように制約を設けることで、型の操作が明確かつシンプルになります。
再帰的な型定義を避けてシンプルにする
再帰的な型定義は強力ですが、必要以上に使うと型チェックのパフォーマンスに影響を与え、コードが複雑になります。再帰を使う必要がない場合は、シンプルなPartialやPickのようなユーティリティ型を使って、再帰的な型操作を避けることが推奨されます。
例えば、DeepPartialのような再帰型が必要ない場合には、通常のPartial型で代用できるケースがあります。
type SimplePartial<T> = Partial<T>;これにより、シンプルな操作で十分な場合はパフォーマンスを向上させ、コードの可読性を維持することができます。
型のドキュメント化とコメントを活用する
複雑な型定義や高度な型操作を行う場合、コメントを使って型の意図や役割を明示することが重要です。特に、他の開発者が理解しやすいように、型定義に適切なコメントを追加しておくことで、型の可読性を高めることができます。
type User = {
name: string;
age: number;
// ユーザーのメールアドレス
email: string;
};こうした小さな工夫が、型定義が複雑になってもシンプルさを保ち、メンテナンスを容易にします。
まとめ
高度な型操作をシンプルに保つためには、型エイリアスの活用、ユーティリティ型の利用、条件付き型の簡潔化、Mapped Typesに制約を加えることが重要です。これらのテクニックを駆使すれば、TypeScriptの強力な型システムをより効果的に活用し、保守性の高いコードを書けるようになります。
Mapped Typesのパフォーマンスへの影響
TypeScriptのMapped Typesは、型操作を柔軟かつ強力に行える反面、パフォーマンスに影響を及ぼす場合があります。特に、大規模なプロジェクトや複雑な型定義を多用する場合、コンパイル速度やエディタでの型推論速度が低下することがあります。ここでは、Mapped Typesがパフォーマンスに与える影響と、それを改善するためのテクニックについて解説します。
型推論への負荷
Mapped Typesが頻繁に使われると、型推論エンジンがすべてのプロパティに対して処理を行う必要があるため、エディタの型補完や型チェックが遅くなることがあります。特に、再帰的な型や、ネストされたMapped Typesの使用が原因で、推論が複雑化し、結果的にパフォーマンスが低下します。
たとえば、次のような複雑なMapped Typesを使用すると、型推論に大きな負荷がかかることがあります。
type ComplexMappedType<T> = {
[P in keyof T]: T[P] extends object ? ComplexMappedType<T[P]> : T[P];
};この例では、Tがオブジェクトであれば再帰的に処理されるため、非常に深いネスト構造を持つ型に対してはパフォーマンスに大きな影響を与える可能性があります。
コンパイル速度の低下
Mapped Typesが複雑になりすぎると、TypeScriptコンパイラが型チェックに時間を要することがあります。特に、再帰型や条件付き型を多用した場合、コンパイル時間が著しく増加することがあります。コンパイル時間が長くなると、開発効率が低下し、大規模なプロジェクトでは特に問題になることがあります。
たとえば、次のような複数の条件付き型を含むMapped Typesは、コンパイル速度に悪影響を与える可能性があります。
type ConditionalMappedType<T> = {
[P in keyof T]: T[P] extends string
? string
: T[P] extends number
? number
: T[P];
};このような条件付き型が多数重なると、コンパイラが各条件を評価するために多くの処理を行わなければならず、コンパイル速度が低下します。
再帰的な型の影響
再帰的な型操作は、型定義が深くなると非常に計算コストが高くなり、パフォーマンスに大きな影響を与えることがあります。TypeScriptは再帰的な型定義をサポートしていますが、再帰の深さが増すにつれてコンパイルエラーが発生したり、推論が不安定になることがあります。
次の例は、典型的な再帰型の例です。
type DeepReadonly<T> = {
readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};この型は非常に便利ですが、オブジェクトのネストが深い場合、再帰的な処理がパフォーマンスに影響を与える可能性があります。
Mapped Typesのパフォーマンスを改善する方法
Mapped Typesによるパフォーマンス低下を防ぐためには、以下の方法が有効です。
1. 型のシンプル化
複雑な型定義を避け、できる限りシンプルな型を使用することが重要です。再帰的な型や多くの条件付き型を含む複雑な定義は、必要最小限に留めるようにしましょう。型エイリアスを使って、複雑な型を部分的に分割することも有効です。
// 再帰型をシンプルにする
type SimplePartial<T> = {
[P in keyof T]?: T[P];
};2. 型のキャッシュを活用
TypeScriptの型システムでは、同じ型を何度も評価することがあるため、型の結果をキャッシュすることでパフォーマンスを向上させることができます。たとえば、一度計算された型の結果を変数に格納し、再利用することで、余計な計算を避けることができます。
type CachedType<T> = {
[P in keyof T]: T[P];
};
type Result = CachedType<User>; // 再利用可能3. 再帰型の使用を控える
再帰的な型操作は便利ですが、必ずしも必要でない場合は、シンプルなMapped Typesやユーティリティ型で対応することを検討しましょう。これにより、型推論の負荷を軽減できます。
// 再帰を避ける場合
type NonRecursiveReadonly<T> = Readonly<T>;4. 型エラーの早期発見
複雑なMapped Typesを使用する場合、型エラーが発生するとデバッグが難しくなります。エディタの型補完機能を活用し、型エラーを早期に発見して修正することで、不要な型チェックの手間を軽減できます。
まとめ
Mapped TypesはTypeScriptにおける型操作を強力にサポートしますが、複雑な型や再帰型を多用するとパフォーマンスに影響を与えることがあります。型のシンプル化やキャッシュの活用、再帰型の使用を控えることで、コンパイル速度や推論パフォーマンスを改善することができます。パフォーマンスを意識しながら、適切なMapped Typesの設計を行いましょう。
演習問題
ここでは、TypeScriptのMapped Typesを使った型操作を実践するための演習問題をいくつか紹介します。これらの問題を解くことで、Mapped Typesの基本的な使い方から応用までの理解を深めることができます。
問題1: Partial型の再実装
TypeScriptの標準ユーティリティ型であるPartialを、Mapped Typesを使って再実装してみましょう。Partial型は、すべてのプロパティをオプショナルにします。
// Partial型を再実装してください
type MyPartial<T> = {
// ヒント: すべてのプロパティに `?` を付ける
};
// 使用例
type User = {
name: string;
age: number;
email: string;
};
type PartialUser = MyPartial<User>;
/* 期待される結果:
PartialUser = {
name?: string;
age?: number;
email?: string;
}
*/問題2: Readonly型の再実装
次に、すべてのプロパティを読み取り専用にするReadonly型をMapped Typesを使って再実装してください。
// Readonly型を再実装してください
type MyReadonly<T> = {
// ヒント: 各プロパティに `readonly` を付ける
};
// 使用例
type ReadonlyUser = MyReadonly<User>;
/* 期待される結果:
ReadonlyUser = {
readonly name: string;
readonly age: number;
readonly email: string;
}
*/問題3: Nullable型の作成
次は、すべてのプロパティの型をnull許容にする型を作成してください。これにより、オブジェクトのプロパティにnullを設定できるようになります。
// すべてのプロパティに null を許容する型を作成してください
type Nullable<T> = {
// ヒント: 各プロパティの型に null を許容する
};
// 使用例
type NullableUser = Nullable<User>;
/* 期待される結果:
NullableUser = {
name: string | null;
age: number | null;
email: string | null;
}
*/問題4: Pick型の再実装
TypeScriptの標準型Pickを再実装し、特定のプロパティだけを選択できる型を作成してください。
// Pick型を再実装してください
type MyPick<T, K extends keyof T> = {
// ヒント: 指定したプロパティ（K）だけを選択する
};
// 使用例
type PickedUser = MyPick<User, 'name' | 'email'>;
/* 期待される結果:
PickedUser = {
name: string;
email: string;
}
*/問題5: DeepReadonly型の作成
最後に、オブジェクトのネストされたプロパティも含めてすべて読み取り専用にするDeepReadonly型を作成してください。再帰的なMapped Typesの使用が必要です。
// ネストされたプロパティも読み取り専用にする型を作成してください
type DeepReadonly<T> = {
// ヒント: プロパティがオブジェクトの場合は再帰的に処理する
};
// 使用例
type NestedUser = {
name: string;
address: {
city: string;
postalCode: number;
};
};
type ReadonlyNestedUser = DeepReadonly<NestedUser>;
/* 期待される結果:
ReadonlyNestedUser = {
readonly name: string;
readonly address: {
readonly city: string;
readonly postalCode: number;
};
}
*/まとめ
これらの演習問題を通じて、Mapped Typesの基本的な使い方から、実用的な応用までを体験することができます。TypeScriptの型システムを効果的に活用することで、型安全性を向上させ、より堅牢なコードを作成できるようになります。
まとめ
本記事では、TypeScriptの強力な機能であるMapped Typesを使った型拡張のテクニックを解説しました。基本的な使い方から、Union型やConditional Typesとの組み合わせ、標準ユーティリティ型の再実装、カスタムユーティリティ型の作成まで、さまざまな応用方法を紹介しました。Mapped Typesを活用することで、型定義を柔軟に操作し、より堅牢で再利用性の高いコードを効率的に書くことができます。これらのテクニックを駆使して、今後のTypeScriptプロジェクトに役立ててください。
コメント