TypeScriptは、型安全なコードを書けることで多くの開発者に支持されています。その中でも「ユニオン型」と「条件型（Conditional Types）」は、型システムの柔軟性を飛躍的に高める重要な機能です。ユニオン型は複数の型をまとめて1つの型として扱うことを可能にし、条件型は状況に応じて型を動的に変化させる力を持っています。これらの機能を組み合わせることで、TypeScriptでより強力で適応性の高いコードを実現できます。本記事では、ユニオン型と条件型の基本から応用までを解説し、実践的な活用方法を紹介します。
ユニオン型とは何か
ユニオン型とは、TypeScriptで複数の型を1つの変数に割り当てることができる型です。具体的には、ある変数が複数の異なる型を持つ可能性がある場合に、これらの型を「|（パイプ）」を使って定義します。これにより、変数は指定されたいずれかの型を取ることが可能になります。
ユニオン型の定義と役割
ユニオン型の構文は非常にシンプルです。例えば、次のように数値と文字列を同時に受け取る変数を定義することができます。
let value: number | string;この場合、valueはnumberまたはstringのいずれかの型を持つことができます。このように、ユニオン型を使用することで、柔軟なデータを扱うことができます。
ユニオン型のユースケース
ユニオン型は、例えば、APIから受け取るデータが複数のフォーマットになる可能性がある場合や、ユーザー入力が異なる型（数値、文字列、ブール値など）を許容する場面で特に有用です。また、エラー処理や異なる型のリストを処理する際にも利用されます。
このように、ユニオン型を活用することで、TypeScriptの型システムを柔軟に適用し、開発の効率を向上させることができます。
条件型（Conditional Types）の基本
条件型（Conditional Types）は、TypeScriptにおける強力な機能で、特定の条件に基づいて型を動的に選択できる仕組みです。これは、プログラムが実行される前に型を検証し、その結果に応じて異なる型を適用する際に利用されます。
条件型の構文と基本的な使い方
条件型は、T extends U ? X : Yという形式で記述します。ここで、TがUに適合する場合にはXが適用され、適合しない場合にはYが適用されます。簡単な例を以下に示します。
type CheckType<T> = T extends string ? 'String Type' : 'Other Type';この場合、CheckType<string>は'String Type'に、CheckType<number>は'Other Type'になります。条件型を使うことで、状況に応じて動的に型を決定できるため、より汎用的な型定義が可能です。
動的型選択の具体例
例えば、関数の引数が文字列であれば特定の型を返し、数値であれば別の型を返す、といったケースで条件型は役立ちます。
type TypeSelector<T> = T extends number ? number[] : string[];このように、TypeSelector<number>はnumber[]型に、TypeSelector<string>はstring[]型になります。条件型は、異なる型を柔軟に扱いたい場合に非常に有効です。
条件型は、型レベルでの条件分岐を実現し、コードの型安全性を保ちながら、より動的で汎用的な型設計を可能にします。
ユニオン型と条件型の組み合わせ
ユニオン型と条件型を組み合わせることで、TypeScriptでさらに高度で柔軟な型定義が可能になります。ユニオン型が複数の型をまとめる役割を果たし、条件型がその型を動的に選択する役割を持つため、これらを組み合わせることで、複雑な型の選択や制御を行うことができます。
複数の型に対する条件型の適用
ユニオン型に対して条件型を適用すると、それぞれの型に条件が評価されるようになります。例えば、次のようなケースが考えられます。
type FilterType<T> = T extends string | number ? T : never;ここでは、ユニオン型string | number | booleanに対して、条件型FilterTypeが適用されています。この結果、stringやnumberの部分はそのまま残り、booleanはneverに変換されます。つまり、FilterType<string | number | boolean>はstring | number型となります。このように、ユニオン型を条件に基づいて絞り込むことが可能です。
実際のユースケース
例えば、APIのレスポンスが複数の異なる型の可能性を持つ場合、そのレスポンスに基づいて異なる処理を行う際に、ユニオン型と条件型を組み合わせて型を制御することができます。次の例では、文字列か数値に応じて異なる型が返される関数の型定義を示します。
type ApiResponse<T> = T extends 'success' ? { data: string } : { error: string };このように、ApiResponse<'success'>は{ data: string }型になり、ApiResponse<'failure'>は{ error: string }型になります。これにより、型の選択が柔軟にでき、より安全で読みやすいコードを書くことができます。
ユニオン型と条件型の組み合わせは、TypeScriptの型システムを最大限に活用し、複雑な型操作を効率的に行うための強力な手段となります。
型の分岐を活用した実例
条件型を活用することで、TypeScriptの型定義において、動的な型分岐を実現することができます。これにより、コードの柔軟性と可読性が向上し、型安全なプログラムを構築することが可能です。ここでは、型の分岐を用いた実際のコード例を見てみましょう。
条件型を使った型分岐のコード例
次の例では、関数の引数に基づいて返される型を条件型で切り替える方法を示します。この方法を使うと、与えられた入力に基づいて異なる型を動的に返すことが可能です。
type ResultType<T> = T extends string ? 'String Result' : 'Other Result';
function getResult<T>(input: T): ResultType<T> {
if (typeof input === 'string') {
return 'String Result' as ResultType<T>;
} else {
return 'Other Result' as ResultType<T>;
}
}
// 使用例
const result1 = getResult('Hello'); // result1の型は 'String Result'
const result2 = getResult(42); // result2の型は 'Other Result'この例では、getResult関数は引数inputの型に応じて、ResultTypeが異なる型を返します。string型の引数が渡された場合には'String Result'型が返され、それ以外の場合は'Other Result'型が返されます。これは、動的な型選択を行う非常に便利な方法です。
応用: APIレスポンスの型分岐
APIレスポンスが異なる形式を持つ場合、条件型を用いて型を動的に選択することができます。例えば、以下のようなケースを考えます。
type ApiResponse<T> = T extends 'success' ? { data: string } : { error: string };
function handleResponse<T extends 'success' | 'failure'>(responseType: T): ApiResponse<T> {
if (responseType === 'success') {
return { data: 'API data' } as ApiResponse<T>;
} else {
return { error: 'API error' } as ApiResponse<T>;
}
}
// 使用例
const successResponse = handleResponse('success'); // { data: string } 型
const failureResponse = handleResponse('failure'); // { error: string } 型このコードでは、handleResponse関数はresponseTypeによってApiResponseの型を条件分岐しています。'success'であれば{ data: string }型が返され、'failure'であれば{ error: string }型が返されます。このように、実際の動作に基づいて適切な型を選択できるため、コードの安全性と可読性が高まります。
型の分岐を活用することで、状況に応じて型を柔軟に変化させることができ、より動的で適応性の高いコードをTypeScriptで書けるようになります。
TypeScriptの型ガードと条件型
型ガード（Type Guards）は、TypeScriptにおいて動的に型を判別するためのメカニズムです。条件型と組み合わせることで、より厳密で安全な型チェックが可能となります。型ガードを使用することで、コード内で特定の型に基づいた処理を安全に実行でき、条件型と連携することで複雑な型の選択や分岐を制御できます。
型ガードの役割
型ガードは、typeofやinstanceofなどの演算子を使用して、ランタイム時に変数の型を判定し、その型に基づいて処理を切り替えるために使用されます。これにより、異なる型のデータを処理する関数やメソッドが、安全に動作することが保証されます。
以下のコードは、typeofを使った型ガードの例です。
function printValue(value: string | number): void {
if (typeof value === 'string') {
console.log(`文字列: ${value}`);
} else {
console.log(`数値: ${value}`);
}
}この場合、printValue関数は引数が文字列か数値かによって処理を分岐しています。typeof演算子を使うことで、valueがどの型であるかを判断し、適切な処理を行うことができます。
条件型と型ガードの連携
条件型は、型ガードと組み合わせることで、さらに強力な型チェックが可能になります。特に、関数の戻り値の型を条件型で定義しつつ、ランタイム時に型ガードで判定を行うパターンは非常に有用です。次の例では、条件型と型ガードを用いて、引数の型に応じた異なる型の結果を返しています。
type ValueType<T> = T extends string ? string : number;
function processValue<T>(value: T): ValueType<T> {
if (typeof value === 'string') {
return value.toUpperCase() as ValueType<T>;
} else {
return (value as number) * 10 as ValueType<T>;
}
}
// 使用例
const result1 = processValue('hello'); // result1の型は string
const result2 = processValue(5); // result2の型は numberここでは、processValue関数が引数の型に基づいて異なる型の結果を返すために、型ガードと条件型を組み合わせています。もし引数が文字列であれば、string型の結果を返し、数値であればnumber型の結果を返します。これにより、ランタイムとコンパイル時の両方で安全な型操作が可能となります。
型ガードの応用例
型ガードは、カスタムクラスやオブジェクトに対しても使用できます。例えば、次のようにinstanceofを使ってクラスの型を判定することができます。
class Dog {
bark() { console.log('ワン！'); }
}
class Cat {
meow() { console.log('ニャー！'); }
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark();
} else {
animal.meow();
}
}この例では、DogとCatのインスタンスを型ガードで判別し、それぞれに適切なメソッドを呼び出しています。
型ガードと条件型を組み合わせることで、型の安全性を確保しつつ、柔軟で適応力のあるコードを構築できます。特に複雑な型の分岐や動的な型選択が必要な場面では、この連携が強力なツールとなります。
条件型のネストと高度な使用例
条件型（Conditional Types）をさらに高度に使用するには、条件型のネストや再帰的な定義を利用します。条件型のネストとは、条件型の内部でさらに別の条件型を使用することを指し、これにより複雑な型の選択や動的な型分岐が可能になります。複雑なデータ構造や型変換が必要な場面で、これらの高度なテクニックが有効です。
条件型のネスト構文
条件型のネストでは、T extends U ? X : Yの形式で定義される基本の条件型に、さらにそのXやYの部分で別の条件型を利用します。次の例では、入力された型に応じてさらに細かい型分岐を行っています。
type NestedConditional<T> = T extends number
? T extends 1 ? 'One' : 'Other Number'
: T extends string
? T extends 'hello' ? 'Greeting' : 'Other String'
: 'Unknown';この例では、まずTがnumberかstringかを判定し、それぞれに対してさらに1や'hello'などの具体的な値で分岐しています。これにより、複数の条件を重ねた複雑な型選択が実現できます。
ネスト型の使用例
ネストされた条件型を使うと、複数の型の組み合わせを柔軟に扱うことができ、特定のパターンに応じて異なる型を返す関数やデータ構造の設計が可能です。例えば、以下の例では、数値や文字列の配列に応じて型を変換するパターンを示しています。
type ElementType<T> = T extends (infer U)[]
? U extends number
? 'Number Element'
: U extends string
? 'String Element'
: 'Other Element'
: 'Not an Array';
type A = ElementType<number[]>; // 'Number Element'
type B = ElementType<string[]>; // 'String Element'
type C = ElementType<boolean[]>; // 'Other Element'
type D = ElementType<number>; // 'Not an Array'ここでは、ElementType型が配列の要素の型に応じて、numberなら'Number Element'、stringなら'String Element'と返すようになっています。このように、ネストされた条件型を使うことで、より細かい型の判定や選択ができるようになります。
再帰的条件型の使用例
条件型は再帰的にも使用でき、データ構造や型の深さに応じた操作を行う際に有効です。例えば、次の例では、配列のネストレベルに応じて型を変換しています。
type DeepArray<T> = T extends (infer U)[]
? DeepArray<U>
: T;
type A = DeepArray<number[][][]>; // number
type B = DeepArray<string[][]>; // string
type C = DeepArray<boolean[]>; // booleanこの再帰的条件型DeepArrayは、配列の中の要素が配列であればさらにその要素を取得し、最終的に配列でない型に到達した時点でその型を返します。これにより、深くネストされた配列の中の基本型を取得することができます。
複雑な型操作の応用
高度な条件型とネスト、再帰を活用することで、複雑な型操作が可能になり、次のようなユースケースで非常に便利です。
- APIレスポンスの型変換: ネストされたオブジェクトや配列のデータ型を解析し、動的に適切な型を選択する。
- ジェネリックなデータ処理: 任意の型に対して特定の変換や操作を適用する関数やクラスの設計。
- 型の正規化: 特定の型を標準化するために、複数の条件型を使って型を変換する。
これらのテクニックを活用することで、型システムをより強力に使いこなすことができ、複雑なデータ構造を扱う際の安全性と柔軟性を大幅に向上させることができます。
型の冗長性を解消するユニオン型と条件型
ユニオン型と条件型を活用することで、TypeScriptにおける型定義の冗長性を解消し、より簡潔で効率的なコードを記述することが可能です。特に大規模なプロジェクトでは、複数の型が絡む場合や異なる条件によって型が変わる場面が多く、これらの機能をうまく使うことでコードを明確に保つことができます。
ユニオン型を使って型の重複を排除
ユニオン型は、複数の型をまとめて一つの型に統合できるため、同様の型をいくつも定義する必要がなくなり、冗長なコードを減らせます。例えば、次の例では、複数の型を一つのユニオン型にまとめています。
type UserResponse = { name: string; age: number; };
type ErrorResponse = { error: string; };
type ApiResponse = UserResponse | ErrorResponse;このApiResponse型は、UserResponseまたはErrorResponseをまとめたものであり、レスポンスの型を一つに統合することで、繰り返しの型定義を避けることができます。これにより、コードの可読性が向上し、メンテナンス性も高まります。
条件型を使って型の冗長性を減らす
条件型は、複数の型が絡む場合に、その条件に応じた動的な型定義を可能にします。これにより、複雑な分岐ごとに新しい型を定義する必要がなくなり、結果として冗長なコードが削減されます。
type Response<T> = T extends 'success' ? { data: string; } : { error: string; };
const handleResponse = <T extends 'success' | 'error'>(type: T): Response<T> => {
return type === 'success'
? { data: 'User data' }
: { error: 'Error occurred' };
}この例では、Response型が'success'か'error'かに応じて異なる型を返すため、動的な型選択が可能になります。これにより、別々の型定義をする手間を省き、コードがシンプルで保守しやすくなります。
ジェネリック型と条件型の組み合わせ
ジェネリック型を条件型と組み合わせることで、より柔軟で汎用的な型定義を行い、同様の型を繰り返し定義する必要がなくなります。次の例では、ジェネリック型と条件型を用いて、異なるデータ型に応じた動作をシンプルに記述しています。
type ExtractArrayType<T> = T extends (infer U)[] ? U : T;
const handleArray = <T>(value: T): ExtractArrayType<T> => {
if (Array.isArray(value)) {
return value[0]; // 配列なら最初の要素を返す
}
return value; // 配列でなければそのまま返す
}この例では、ExtractArrayType型が配列の要素型を抽出するため、配列の型に基づいて処理を動的に変えることができます。このように、型定義をジェネリック型で汎用化し、条件型で動的に型を変更することで、コードの冗長性を大幅に削減できます。
型の冗長性を解消するメリット
ユニオン型と条件型を活用して型定義の冗長性を減らすことで、次のようなメリットがあります。
- メンテナンス性の向上: 一度定義した型を複数箇所で再利用できるため、型の変更が必要な場合にも対応が容易です。
- コードの簡潔化: 繰り返しの型定義を避け、コードがシンプルで読みやすくなります。
- 型安全性の向上: 複数の型をまとめることで、型の矛盾やエラーを防ぎ、型安全性が確保されます。
これらのメリットを活かし、ユニオン型と条件型を効果的に使うことで、型の冗長性を解消しつつ、効率的なコードを記述することが可能になります。
条件型の限界と注意点
条件型はTypeScriptにおける強力な機能ですが、使用する際にはいくつかの限界や注意点があります。条件型を過度に使うと、かえってコードが複雑になり、読みやすさや保守性が低下する場合もあります。ここでは、条件型の限界や注意すべきポイントを詳しく解説します。
複雑なネストによる可読性の低下
条件型を複雑にネストすることで、動的で強力な型の選択が可能になりますが、それに伴ってコードの可読性が大きく低下する可能性があります。次のような場合、条件型が複雑に絡み合い、直感的に理解するのが難しくなることがあります。
type ComplexType<T> = T extends string
? T extends 'A' ? number : boolean
: T extends number
? T extends 1 ? 'One' : 'Other Number'
: never;このようなネストされた条件型は、ある程度の規模を超えると理解しづらくなり、後から読む人や保守する人にとって大きな負担になります。したがって、条件型のネストは必要最小限にとどめ、できるだけ簡潔な表現を心がけることが重要です。
型の分岐による冗長性の増加
条件型は、型ごとに分岐を作成して異なる処理を行うため、型の数が増えるとその分だけ条件型の記述が複雑になり、冗長性が生まれることがあります。例えば、同じような分岐を何度も繰り返して記述するケースは、条件型がかえって冗長になってしまう典型的な例です。
type OveruseExample<T> = T extends string
? 'String'
: T extends number
? 'Number'
: T extends boolean
? 'Boolean'
: T extends null
? 'Null'
: 'Unknown';このように、型の種類ごとに個別に条件を設けていると、型が追加されるたびに分岐が増え、管理が難しくなります。冗長な型分岐を避けるため、可能であればユニオン型や共通の型を定義することが推奨されます。
複雑な型推論によるパフォーマンスの影響
TypeScriptのコンパイラは型推論を行いながら型チェックを実施しますが、条件型が過度に複雑化するとコンパイル時のパフォーマンスに影響を与えることがあります。特に再帰的な条件型や大量のネスト型は、コンパイラが型推論を行う際に余計な計算コストがかかり、ビルド時間が増加する原因となる場合があります。
type RecursiveType<T> = T extends (infer U)[] ? RecursiveType<U> : T;このように再帰的な条件型を多用すると、コンパイラが型を推論するための計算が複雑化し、パフォーマンスが低下することがあります。こうした場合には、できるだけ型定義を簡潔に保つか、必要に応じて型推論を制御するための型アノテーションを追加することが重要です。
条件型が適切に機能しない場合の例
条件型は動的な型選択を行いますが、全てのケースで期待通りに動作するわけではありません。例えば、ユニオン型の一部だけが条件にマッチした場合、予期しない型が返されることがあります。
type Example<T> = T extends string | number ? 'Matched' : 'Not Matched';
type Result1 = Example<string>; // 'Matched'
type Result2 = Example<number>; // 'Matched'
type Result3 = Example<boolean>; // 'Not Matched'このコードでは、string | number全体に条件が適用されるため、ユニオン型全体が'Matched'として処理されます。これが望ましい動作でない場合、ユニオン型の個々の要素に対して条件を適用するために別の工夫が必要です。例えば、ユニオン型の各要素に個別に処理を施す場合にはinferを使った処理が適しています。
まとめ: 条件型使用時のベストプラクティス
条件型を使用する際の注意点として、次のベストプラクティスを心がけると良いでしょう。
- 条件型のネストを最小限に保つ: 複雑な条件型は可読性を低下させるため、簡潔に保つ。
- 過度な型分岐を避ける: 冗長な分岐を避け、可能であれば共通型やユニオン型を使用。
- パフォーマンスに注意: 再帰型や複雑な条件型はコンパイル時間に影響を与える可能性があるため、注意して使用する。
- 型推論の限界を理解する: 条件型が期待通りに機能しない場合があるため、個々のユニオン型要素に適切に条件を適用することを検討する。
これらのポイントを押さえることで、条件型の限界に対処し、効率的で保守性の高いコードを作成できます。
TypeScript 4.x以降の条件型の新機能
TypeScriptはバージョン4.x以降、型システムにいくつかの強力な新機能を追加しました。条件型も例外ではなく、これらの新機能を活用することで、型推論の精度と柔軟性が向上し、複雑な型定義や処理がさらに簡潔に行えるようになっています。ここでは、TypeScript 4.xで導入された条件型に関連する新機能と、それらの具体的な活用方法を紹介します。
分配条件型の改善
TypeScriptではユニオン型に対して条件型を適用すると、各ユニオンの構成要素に対して個別に条件が適用されます。これを「分配条件型」と呼びます。TypeScript 4.x以降では、この分配条件型に関する改善が行われ、より柔軟にユニオン型を扱うことが可能になりました。
type NonNullableType<T> = T extends null | undefined ? never : T;
type Result = NonNullableType<string | number | null>; // string | numberこの例では、NonNullableTypeがnullやundefinedを除外し、それ以外の型を保持します。分配条件型が適用されるため、ユニオン型string | number | nullが個々の型に分解され、nullが除外された結果string | numberが返されます。
型推論の改善：インデックス型の推論強化
TypeScript 4.1では、テンプレートリテラル型が導入され、条件型と組み合わせることで、インデックス型の推論や型操作が飛躍的に強化されました。この機能を利用することで、型の一部を動的に変更したり、文字列の一部を型レベルで操作することが可能です。
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type Person = { name: string; age: number };
type PersonGetters = Getters<Person>;
/*
type PersonGetters = {
getName: () => string;
getAge: () => number;
}
*/この例では、Getters型がPerson型のプロパティ名を元にして、getプレフィックスを付けた関数型を生成しています。keyofを使ってオブジェクトのプロパティを抽出し、Capitalizeによってプロパティ名を大文字に変換することで、より動的で柔軟な型の生成が可能になりました。
条件型とテンプレートリテラル型の組み合わせ
テンプレートリテラル型は、TypeScript 4.1で導入された新しい機能で、条件型と組み合わせることで非常に強力な型操作が可能になります。これにより、文字列操作や動的な型の生成を型レベルで行うことができます。
type ExtractId<T> = T extends `${infer Prefix}Id` ? Prefix : never;
type UserId = ExtractId<'UserId'>; // 'User'
type OrderId = ExtractId<'OrderId'>; // 'Order'
type InvalidId = ExtractId<'Invalid'>; // neverこの例では、文字列リテラル型を解析し、"Id"というサフィックスを持つ文字列からその前部分を抽出しています。条件型とテンプレートリテラル型を組み合わせることで、動的な文字列処理を型レベルで実現することができます。
新しい制約付き推論: `infer`キーワードの活用
TypeScript 4.xでは、inferキーワードの機能が強化され、条件型の中で推論された型に対してより細かい制約を設けることが可能になりました。これにより、特定の条件で推論された型をさらに制約し、それに基づいた型定義を行うことができます。
type FunctionReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
const testFunc = () => 123;
type ReturnTypeTest = FunctionReturnType<typeof testFunc>; // numberこの例では、FunctionReturnType型が関数の戻り値の型を推論しています。inferキーワードを使うことで、戻り値の型Rが動的に推論され、その結果が適用されています。このような条件付き推論によって、関数型や配列型など、さまざまなデータ型に対して動的な型解析が行えるようになりました。
条件型における制限と注意点
TypeScript 4.x以降で条件型が大幅に強化された一方で、依然としていくつかの制限があります。たとえば、非常に複雑な条件型や再帰型はコンパイラのパフォーマンスに悪影響を及ぼす可能性があります。また、過度にネストされた条件型は、型の可読性が低下し、保守性に悪影響を与えることがあります。そのため、条件型を使用する際は、可能な限り簡潔な表現を心がけることが重要です。
まとめ: 条件型の新機能の活用
TypeScript 4.x以降の条件型には、テンプレートリテラル型や推論機能の強化、分配条件型の改善など、多くの新機能が追加され、より複雑で動的な型操作が簡単に行えるようになりました。これらの新機能を適切に活用することで、柔軟で強力な型定義を作成し、型安全性を高めたコードを書くことが可能になります。ただし、複雑な条件型やネスト型の使用には慎重さが求められるため、可読性と保守性を意識して利用しましょう。
応用例と演習問題
ここでは、ユニオン型と条件型を実際のプロジェクトで活用するための応用例をいくつか紹介し、理解を深めるための演習問題を提示します。これらの例と問題を通じて、TypeScriptの型システムをより効果的に使いこなせるようになるでしょう。
応用例1: 動的なAPIレスポンス型
ユニオン型と条件型は、APIレスポンスを動的に型定義する場合に非常に有用です。次の例では、APIのエンドポイントに応じて異なるレスポンス型を返す処理を行います。
type ApiResponse<T> = T extends 'user'
? { id: number; name: string; }
: T extends 'product'
? { id: number; price: number; }
: { error: string; };
function fetchApi<T extends 'user' | 'product' | 'error'>(endpoint: T): ApiResponse<T> {
if (endpoint === 'user') {
return { id: 1, name: 'John' } as ApiResponse<T>;
} else if (endpoint === 'product') {
return { id: 1, price: 100 } as ApiResponse<T>;
} else {
return { error: 'Invalid endpoint' } as ApiResponse<T>;
}
}
const userResponse = fetchApi('user'); // { id: number; name: string; }
const productResponse = fetchApi('product'); // { id: number; price: number; }
const errorResponse = fetchApi('error'); // { error: string; }この例では、fetchApi関数は、引数に基づいて異なる型のレスポンスを返します。ユニオン型と条件型を活用することで、柔軟で安全なAPIレスポンスの型定義を実現しています。
応用例2: ジェネリックなユーティリティ関数の型定義
ジェネリック型と条件型を組み合わせることで、汎用的なユーティリティ関数を作成できます。次の例では、配列か単一の値かを判定して適切な型を返すユーティリティ関数を実装しています。
type ArrayOrSingle<T> = T extends any[] ? T[0] : T;
function getFirst<T>(value: T): ArrayOrSingle<T> {
return Array.isArray(value) ? value[0] : value;
}
const firstElement = getFirst([10, 20, 30]); // 10
const singleValue = getFirst(100); // 100ここでは、ArrayOrSingle型を使って、配列であればその最初の要素を返し、単一の値であればそのまま返す関数を定義しています。これにより、配列かどうかを動的に判定し、対応する型を適用することができます。
演習問題
問題1: ユニオン型を使った型定義
次のユニオン型を使って、getStatusMessage関数を実装してください。この関数は、引数に渡されたステータスに応じて異なるメッセージを返します。
type Status = 'success' | 'error' | 'loading';
function getStatusMessage(status: Status): string {
// ここに処理を実装
}
// 期待される出力:
// getStatusMessage('success') -> 'Operation was successful.'
// getStatusMessage('error') -> 'An error occurred.'
// getStatusMessage('loading') -> 'Loading...'問題2: 条件型を使った型分岐
次の条件型を使って、getTypeLabel関数を実装してください。この関数は、引数の型に応じて異なるラベルを返します。
type TypeLabel<T> = T extends string
? 'This is a string'
: T extends number
? 'This is a number'
: 'Unknown type';
function getTypeLabel<T>(value: T): TypeLabel<T> {
// ここに処理を実装
}
// 期待される出力:
// getTypeLabel('hello') -> 'This is a string'
// getTypeLabel(123) -> 'This is a number'
// getTypeLabel(true) -> 'Unknown type'解答と解説
これらの演習問題を解くことで、ユニオン型と条件型の基本的な使い方をより深く理解できます。実際にコードを書いてみることで、動的な型選択や型の柔軟性を体感し、TypeScriptの型システムの利便性を実感できるでしょう。
応用例や演習問題を通じて、実務に活かせるTypeScriptのスキルを向上させ、より安全で効率的な型定義を実現していきましょう。
まとめ
本記事では、TypeScriptにおけるユニオン型と条件型を活用した柔軟な型選択方法について解説しました。ユニオン型による複数の型の統合や、条件型を使った動的な型の分岐によって、より強力で安全なコード設計が可能となります。また、TypeScript 4.x以降の新機能を活用することで、さらに複雑な型操作も簡潔に行えるようになりました。これらの技術を理解し、適切に使いこなすことで、より効率的でメンテナンスしやすいコードを作成できるでしょう。
コメント