TypeScriptの条件型を使った型の拡張と制御方法を徹底解説

TypeScriptは、JavaScriptのスーパーセットであり、型システムによってコードの安全性と保守性を高めることができます。その中でも、条件型（Conditional Types）は非常に強力なツールであり、既存の型に対して柔軟に拡張や制御を行うことが可能です。特に、型の動的な変換や、状況に応じた型の変更が必要な場合に、この条件型は大きな役割を果たします。

本記事では、条件型の基本的な使い方から始まり、具体的な応用例までを詳細に解説します。条件型を使うことで、型安全性をさらに高め、柔軟で保守性の高いコードを記述するスキルを身につけることができるでしょう。

条件型とは？

TypeScriptにおける条件型（Conditional Types）は、特定の条件に基づいて型を動的に変換できる強力な仕組みです。条件型を使用することで、型が別の型にマッピングされるかどうかを条件式として表現できます。これは、条件分岐を行いながらも、型システムの安全性を維持したい場合に非常に有効です。

基本的な構文

条件型の構文は、通常の三項演算子のように表現されます。

T extends U ? X : Y

この式は、型 T が型 U を継承している（または型互換性がある）場合には型 X を返し、そうでない場合には型 Y を返す、という意味になります。このように、型の条件分岐を行うことで、コードに柔軟性を持たせることができます。

基本的な利用場面

たとえば、数値型を string 型に変換するような簡単な例を考えてみましょう。

type NumberToString<T> = T extends number ? string : T;

let example1: NumberToString<number>; // string型
let example2: NumberToString<boolean>; // boolean型

この例では、T が number である場合は string 型が返され、そうでない場合は元の型 T が返されます。このように条件型は、柔軟に型を制御できる重要な機能です。

条件型の基本構文と例

TypeScriptの条件型は、T extends U ? X : Y という構文を使って表現されます。この構文は、型 T が型 U に代入可能（extends）であれば型 X を、そうでなければ型 Y を返します。条件型は、既存の型に対して柔軟に動的な条件付けを行うため、型安全性を保ちながらも汎用的なコードを書けることが利点です。

簡単な条件型の例

条件型の基本的な使い方を簡単な例で見てみましょう。

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

type Test1 = IsString<string>;  // true
type Test2 = IsString<number>;  // false

この例では、型 T が string 型であれば true を返し、それ以外の型では false を返す条件型を定義しています。これにより、型の判定や処理を型レベルで行うことができます。

ユニオン型と条件型

条件型はユニオン型とも連携して動作します。ユニオン型に対して条件型を適用すると、それぞれの型に対して個別に評価が行われます。

type ToString<T> = T extends number ? string : T;

type Result = ToString<number | boolean>;  // string | boolean

この例では、number | boolean というユニオン型に条件型を適用しています。number 型の部分は string に変換され、boolean 型はそのまま維持されます。このように、条件型はユニオン型を扱う際にも便利に機能します。

条件型の基本を理解することで、型の柔軟な制御や操作が可能になり、コードの型安全性を向上させることができます。

条件型による型の拡張

条件型を活用することで、既存の型に対して新しいプロパティや機能を追加することができます。これにより、型の再利用性や柔軟性が高まり、特定の条件に応じて異なる型を作成することが可能です。

プロパティの追加を条件型で制御する

条件型を使うことで、既存の型に条件付きで新たなプロパティを追加することができます。例えば、オブジェクト型に対して、特定の条件下でプロパティを追加するケースを考えてみましょう。

type AddProperty<T> = T extends { age: number } ? T & { isAdult: boolean } : T;

この条件型では、T が age というプロパティを持つ場合、新たに isAdult というプロパティを追加しています。そうでない場合は、T をそのまま使用します。

例

type Person = { name: string; age: number };
type Animal = { name: string };

type PersonWithAdultFlag = AddProperty<Person>; // { name: string; age: number; isAdult: boolean }
type AnimalWithoutAdultFlag = AddProperty<Animal>; // { name: string }

この例では、Person 型に isAdult プロパティが追加されますが、Animal 型には追加されません。このように、条件型を使用することで、型に対する柔軟な拡張が可能になります。

ユニオン型に対する型の拡張

ユニオン型にも条件型を適用して、型を拡張することができます。複数の異なる型に対して、それぞれ異なる条件付きでプロパティを追加することができます。

type AddFlag<T> = T extends { age: number } ? T & { hasFlag: true } : T & { hasFlag: false };

type Result1 = AddFlag<{ age: number; name: string }>;  // { age: number; name: string; hasFlag: true }
type Result2 = AddFlag<{ name: string }>;  // { name: string; hasFlag: false }

このように、ユニオン型やオブジェクト型に対して、条件に基づいてプロパティを動的に追加することができるのが条件型の強力な点です。これにより、型の設計がより柔軟かつ再利用性の高いものになります。

TypeScriptの組み込み型を条件型で活用する

TypeScriptには、条件型を利用して動的に型を操作できる便利な組み込み型が多数用意されています。これらの組み込み型を使用することで、複雑な型の操作や拡張を簡単に行うことができ、コードの型安全性を強化しながら柔軟な記述が可能になります。ここでは、よく使用される Partial、Required、Readonly などの組み込み型を条件型で活用する方法を解説します。

Partialを条件型で利用する

Partial<T> は、指定された型 T のすべてのプロパティをオプショナル（?）にする組み込み型です。これに条件型を組み合わせることで、特定の条件下でのみプロパティをオプショナルにする柔軟な型を作成できます。

type ConditionalPartial<T> = T extends { age: number } ? Partial<T> : T;

この例では、T が age プロパティを持つ場合、そのすべてのプロパティをオプショナルにします。条件に一致しない場合は、元の型 T をそのまま保持します。

例

type Person = { name: string; age: number };
type Animal = { name: string };

type PersonPartial = ConditionalPartial<Person>;  // { name?: string; age?: number }
type AnimalUnchanged = ConditionalPartial<Animal>;  // { name: string }

この例では、Person 型はすべてのプロパティがオプショナルに変換されますが、Animal 型はそのままです。

Requiredを条件型で活用する

Required<T> は、指定された型 T のすべてのプロパティを必須（オプショナルではない）にする型です。これも条件型を組み合わせることで、動的にプロパティを必須に変換することができます。

type ConditionalRequired<T> = T extends { age: number } ? Required<T> : T;

この条件型は、T に age プロパティがある場合、そのすべてのプロパティを必須にします。

例

type Person = { name?: string; age?: number };
type Animal = { name: string };

type PersonRequired = ConditionalRequired<Person>;  // { name: string; age: number }
type AnimalUnchanged = ConditionalRequired<Animal>;  // { name: string }

この例では、Person 型のすべてのプロパティが必須となりますが、Animal 型はそのままです。

Readonlyを条件型で活用する

Readonly<T> は、指定された型 T のすべてのプロパティを読み取り専用（readonly）に変換します。条件型を組み合わせて、特定の条件下でのみプロパティを読み取り専用にすることも可能です。

type ConditionalReadonly<T> = T extends { age: number } ? Readonly<T> : T;

この条件型は、T が age プロパティを持つ場合、そのすべてのプロパティを readonly にします。

例

type Person = { name: string; age: number };
type Animal = { name: string };

type PersonReadonly = ConditionalReadonly<Person>;  // { readonly name: string; readonly age: number }
type AnimalUnchanged = ConditionalReadonly<Animal>;  // { name: string }

この例では、Person 型は読み取り専用に変換されますが、Animal 型はそのままです。

これらの組み込み型を条件型と組み合わせることで、型の柔軟な操作が可能になり、アプリケーションの型システムを強化することができます。これにより、再利用性が高く、メンテナンスしやすい型定義が作成できます。

ネストされた条件型の利用法

TypeScriptの条件型は、他の条件型の中にネストして使用することも可能です。ネストされた条件型を利用することで、複雑なロジックに基づいて型を動的に制御することができます。これにより、状況に応じた型の制御を細かく行うことができ、柔軟で強力な型システムを実現することができます。

ネストされた条件型の構造

ネストされた条件型は、複数の extends 文を組み合わせて、より複雑な条件を評価することができます。以下の例では、T が数値型かどうか、さらにその数値が positive か negative かを評価する二重の条件型を使用しています。

type IsPositive<T> = T extends number ? (T extends 0 ? "zero" : (T extends 1 ? "positive" : "negative")) : "not a number";

この例では、まず T が number であるかどうかを評価し、その後さらに T が具体的に 0 か 1 かそれ以外かを判定しています。このように、ネストされた条件型は複数の条件を順次評価して結果を導くことができます。

複数の型に対する条件付き型変換

複数の型に対して異なる型変換を行う際にも、ネストされた条件型が役立ちます。例えば、次の例では、T が string 型なら長さを返し、number 型なら絶対値を返すといったケースをネストした条件型で表現できます。

type Transform<T> = T extends string 
  ? `Length: ${T['length']}` 
  : T extends number 
  ? `Absolute: ${T extends 1 ? 1 : T}` 
  : "Unsupported";

例

type StringCase = Transform<"hello">;  // "Length: 5"
type NumberCase = Transform<-42>;  // "Absolute: -42"
type OtherCase = Transform<boolean>;  // "Unsupported"

この例では、T が string の場合は長さ、number の場合はその数値の絶対値（簡略化のため数値をそのまま出力）を返します。それ以外の型は “Unsupported” として扱われます。

条件に応じた型の変換

ネストされた条件型は、さまざまな条件に応じた複雑な型変換を行う際に非常に有用です。例えば、以下の例では、T が配列かどうか、さらにその配列が空であるかどうかをチェックし、それに応じた型を返す条件型を示します。

type ArrayCheck<T> = T extends any[] 
  ? (T['length'] extends 0 ? "Empty array" : "Non-empty array") 
  : "Not an array";

例

type EmptyArrayCase = ArrayCheck<[]>;  // "Empty array"
type NonEmptyArrayCase = ArrayCheck<[1, 2, 3]>;  // "Non-empty array"
type NotArrayCase = ArrayCheck<number>;  // "Not an array"

この例では、T が配列かどうか、さらに配列が空かどうかに基づいて適切な型を返すことができます。このように、ネストされた条件型を活用することで、複雑な型判定や変換を実現できます。

ネストされた条件型を使うことで、単純な条件型よりもさらに細かく型を制御し、複雑な型を扱う場面でも柔軟に対応できるようになります。これにより、開発者は型システムを駆使して安全性と柔軟性を両立させたコードを書くことができるようになります。

複数の条件を組み合わせた型の作成

TypeScriptの条件型は、単一の条件だけでなく、複数の条件を組み合わせて型を作成することが可能です。これにより、より高度で柔軟な型定義が可能となり、実際のアプリケーションにおける複雑な型チェックや変換を実現できます。

複数の条件を組み合わせた条件型

複数の条件を組み合わせることで、異なる条件に基づいた型変換や型判定を行うことができます。以下の例では、T が string、number、または boolean 型かどうかを判定し、それぞれに応じて異なる型を返すようにします。

type MultiConditional<T> = 
  T extends string ? "String type" :
  T extends number ? "Number type" :
  T extends boolean ? "Boolean type" :
  "Unknown type";

この例では、T が string なら "String type"、number なら "Number type"、boolean なら "Boolean type" が返されます。どれにも該当しない場合は、"Unknown type" が返されます。

例

type Case1 = MultiConditional<string>;   // "String type"
type Case2 = MultiConditional<number>;   // "Number type"
type Case3 = MultiConditional<boolean>;  // "Boolean type"
type Case4 = MultiConditional<null>;     // "Unknown type"

このように、複数の条件を組み合わせることで、型のチェックや変換を簡単に行うことができます。

複雑な条件で型を制御する

条件型では、条件の数が増えるにつれて、より複雑な型制御が可能です。例えば、T がオブジェクト型かどうかを確認し、さらにそのオブジェクトが特定のプロパティを持っているかを条件に組み込むことができます。

type CheckProperties<T> = 
  T extends { name: string } ? 
    (T extends { age: number } ? "Has name and age" : "Has name but no age") : 
  "No name property";

この条件型では、T が name プロパティを持つか、さらに age プロパティも持つかどうかをチェックしています。

例

type Case1 = CheckProperties<{ name: string; age: number }>;  // "Has name and age"
type Case2 = CheckProperties<{ name: string }>;               // "Has name but no age"
type Case3 = CheckProperties<{ age: number }>;                // "No name property"

この例では、オブジェクト型のプロパティに応じて、異なる型を返すことができています。このように複数の条件を組み合わせることで、より詳細な型制御が可能になります。

条件に基づいた型推論の複合

TypeScriptの強力な型推論と条件型を組み合わせることで、関数の引数や返り値に対して動的に型を設定することも可能です。以下の例では、複数の条件を組み合わせて型推論を行います。

function processValue<T>(value: T): MultiConditional<T> {
  if (typeof value === "string") {
    return "String type" as MultiConditional<T>;
  } else if (typeof value === "number") {
    return "Number type" as MultiConditional<T>;
  } else if (typeof value === "boolean") {
    return "Boolean type" as MultiConditional<T>;
  } else {
    return "Unknown type" as MultiConditional<T>;
  }
}

この関数では、value の型に応じて MultiConditional<T> 型を返します。このように、複数の条件を組み合わせることで、型推論を駆使した柔軟な関数を作成することができます。

例

const result1 = processValue("hello");   // "String type"
const result2 = processValue(42);        // "Number type"
const result3 = processValue(true);      // "Boolean type"
const result4 = processValue(null);      // "Unknown type"

このように、複数の条件を組み合わせることで、型推論や型チェックの柔軟性を高め、実際のアプリケーションのニーズに合わせた型設計が可能になります。

複数の条件を組み合わせた条件型を使用することで、型定義が複雑であっても動的に柔軟に制御できるようになります。これにより、型の安全性を維持しつつ、複雑なビジネスロジックを型システムに反映させることができます。

条件型と型推論の組み合わせ

TypeScriptの型推論は、コードがどのように使用されるかを自動的に判断し、型を割り当てる強力な機能です。この型推論を条件型と組み合わせることで、より高度で柔軟な型制御が可能になります。条件型と型推論を組み合わせることで、動的な型推論と型の変換を行い、コードの可読性と型安全性を向上させることができます。

条件型を用いた型推論の動的制御

TypeScriptでは、関数やジェネリクスの文脈で型推論が多用されます。条件型を使うことで、関数の引数や戻り値の型を動的に制御し、型推論をさらに高度に活用することが可能です。

以下は、条件型を使用して、関数の戻り値の型を入力値に応じて動的に変える例です。

function getValue<T>(value: T): T extends string ? number : boolean {
  if (typeof value === "string") {
    return value.length as T extends string ? number : boolean;
  } else {
    return true as T extends string ? number : boolean;
  }
}

この関数では、引数 value が string 型であれば戻り値は number 型、それ以外の場合は boolean 型となります。TypeScriptは、このような条件型による型推論を自動的に行います。

例

const result1 = getValue("hello");  // number型（文字列の長さが返る）
const result2 = getValue(42);       // boolean型（trueが返る）

このように、条件型を利用することで、引数の型に基づいて異なる型の値を動的に返す関数を定義できます。

条件型とユニオン型を組み合わせた型推論

条件型とユニオン型を組み合わせることで、より複雑な型推論が可能になります。ユニオン型を扱う際、条件型は各ユニオン型の要素ごとに個別に適用され、最終的に合成された型が推論されます。

type ProcessValue<T> = T extends string 
  ? number 
  : T extends number 
  ? boolean 
  : T extends boolean 
  ? string 
  : null;

この条件型では、T が string 型であれば number 型、number 型であれば boolean 型、といった具合に型が推論されます。

例

type Result1 = ProcessValue<string>;   // number型
type Result2 = ProcessValue<number>;   // boolean型
type Result3 = ProcessValue<boolean>;  // string型
type Result4 = ProcessValue<object>;   // null型

これにより、複数の条件を組み合わせてユニオン型や他の複雑な型に対しても、柔軟に型推論を適用できます。

条件型を使ったジェネリクスと型推論の連携

ジェネリクスを条件型と組み合わせて使うことで、汎用的かつ柔軟な型推論を行うことができます。以下の例では、条件型を利用して、引数に渡される型に応じて異なる型を推論するジェネリクス関数を作成しています。

function processInput<T>(input: T): T extends string ? string[] : T[] {
  if (typeof input === "string") {
    return input.split('') as T extends string ? string[] : T[];
  } else {
    return [input] as T extends string ? string[] : T[];
  }
}

この関数では、引数 input が string 型の場合、文字列を分割して string[] 型の配列を返し、それ以外の型の場合は配列に変換して返します。

例

const result1 = processInput("hello");   // string[]型（["h", "e", "l", "l", "o"]）
const result2 = processInput(42);        // number[]型（[42]）

このように、ジェネリクスと条件型を組み合わせることで、型推論が動的に適用され、柔軟な型変換が実現できます。

条件型と型推論を組み合わせることで、より柔軟で強力な型制御を行うことができます。これにより、型安全性を高めつつ、複雑なビジネスロジックを扱う際も効率的なコーディングが可能になります。TypeScriptの条件型と型推論の機能を駆使して、柔軟な型の操作を習得し、アプリケーションの型安全性を強化しましょう。

実践例: フロントエンドアプリの型安全性を高める

TypeScriptの条件型は、フロントエンドアプリケーションにおいて特に役立ちます。動的に変化するデータや多様なユーザー入力が絡むアプリケーションでは、柔軟で型安全な処理が求められます。ここでは、条件型を使ってフロントエンドアプリの型安全性を高める実践例を紹介します。

フォーム入力データの型安全性の向上

ユーザー入力は多くの場合、string 型として扱われますが、フォームのフィールドによって異なるデータ型が求められることがあります。例えば、数値や日時などです。条件型を活用して、入力データを適切に型付けし、後続の処理で型の安全性を確保できます。

type FormField<T> = T extends string 
  ? string 
  : T extends number 
  ? number 
  : T extends boolean 
  ? boolean 
  : unknown;

interface FormData {
  name: string;
  age: number;
  agreeToTerms: boolean;
}

type SafeForm<T> = {
  [K in keyof T]: FormField<T[K]>;
};

この例では、FormData 型に基づき、name フィールドは string、age フィールドは number、agreeToTerms フィールドは boolean として型安全なデータ構造が生成されます。

例

const formData: SafeForm<FormData> = {
  name: "John",
  age: 30,
  agreeToTerms: true,
};

このように、条件型を使うことでフォームのデータを動的に型付けし、データの正確性を強化できます。

APIレスポンスの型安全な処理

フロントエンドアプリケーションでは、APIからのレスポンスを受け取り、そのデータを表示することがよくあります。しかし、APIレスポンスはしばしば複雑で、データの構造が動的に変化することもあります。ここでも条件型を使って、レスポンスの型安全性を確保することが可能です。

type ApiResponse<T> = T extends { status: 'success' }
  ? { data: T; error: null }
  : { data: null; error: string };

type SuccessResponse = { status: 'success'; value: number };
type ErrorResponse = { status: 'error'; message: string };

function handleApiResponse<T>(response: T): ApiResponse<T> {
  if (response.status === 'success') {
    return { data: response, error: null } as ApiResponse<T>;
  } else {
    return { data: null, error: 'An error occurred' } as ApiResponse<T>;
  }
}

この例では、ApiResponse<T> 型を使って、APIレスポンスが成功かエラーかに基づいて返される型を動的に変えています。

例

const successResponse: SuccessResponse = { status: 'success', value: 100 };
const result1 = handleApiResponse(successResponse);  
// result1の型は { data: SuccessResponse; error: null }

const errorResponse: ErrorResponse = { status: 'error', message: 'Invalid request' };
const result2 = handleApiResponse(errorResponse);    
// result2の型は { data: null; error: string }

このように、APIレスポンスの状態に基づいて型を自動的に変換できるため、後続の処理において型エラーを防ぐことができます。

ユーザー権限に基づくUI制御

アプリケーションのユーザー権限に基づいて、UIの動的な制御が必要な場合も条件型が有効です。例えば、管理者ユーザーには特定のUI要素を表示し、一般ユーザーには別のUI要素を表示する場合です。

type UserRole = 'admin' | 'user' | 'guest';

type DisplayComponent<T> = T extends 'admin' 
  ? 'AdminPanel' 
  : T extends 'user' 
  ? 'UserDashboard' 
  : 'GuestWelcome';

function getComponentForRole<T extends UserRole>(role: T): DisplayComponent<T> {
  if (role === 'admin') {
    return 'AdminPanel' as DisplayComponent<T>;
  } else if (role === 'user') {
    return 'UserDashboard' as DisplayComponent<T>;
  } else {
    return 'GuestWelcome' as DisplayComponent<T>;
  }
}

この例では、ユーザーの役割に基づいて適切なコンポーネントが動的に選択されます。

例

const adminComponent = getComponentForRole('admin');   // 'AdminPanel'
const userComponent = getComponentForRole('user');     // 'UserDashboard'
const guestComponent = getComponentForRole('guest');   // 'GuestWelcome'

このように、条件型を使うことで、ユーザー権限やアプリケーションの動作状況に応じてUIの制御を行うことができます。

フロントエンドアプリケーションでは、型安全性を確保しつつ、柔軟にデータやUIを制御することが求められます。条件型を適切に活用することで、複雑な状況にも対応できる型安全なコードを記述でき、アプリケーションの信頼性と保守性を大幅に向上させることが可能です。

条件型の制限と注意点

TypeScriptの条件型は非常に強力ですが、使用する際にはいくつかの制限や注意すべきポイントがあります。条件型を適切に使うためには、これらの制限を理解し、効果的に対処することが重要です。ここでは、条件型の主な制限と注意点について解説します。

条件型の評価順序

条件型は、左から右に順に評価されます。複数の条件が組み合わされている場合、条件が複雑になると予期しない型が返されることがあります。このため、条件の順序には注意が必要です。

type Example<T> = T extends number ? "Number" : T extends string ? "String" : "Unknown";

この例では、まず T が number かどうかを確認し、その後 string かどうかを評価します。この順序が正しくないと、誤った型が返されることがあります。たとえば、number も string も持つユニオン型では、どちらの条件が優先されるかが問題となります。

例

type Result1 = Example<number | string>;  // "Number" | "String"

このように、ユニオン型ではそれぞれの要素が個別に評価されますが、条件の複雑さが増すと予期しない挙動を引き起こす可能性があります。

再帰的な条件型の制限

TypeScriptの条件型は再帰的に使用できますが、過度な再帰はコンパイルエラーやパフォーマンスの問題を引き起こす可能性があります。特に、無限ループのような再帰構造を持つ型定義は避けなければなりません。

type RecursiveType<T> = T extends any[] ? RecursiveType<T[number]> : T;

この例では、配列の中の型を再帰的に評価しますが、再帰の深さが大きくなるとコンパイル時間が増加し、最終的にはエラーとなる可能性があります。

例

type DeepArray = number[][][][][];  // 多重配列
type UnwrappedType = RecursiveType<DeepArray>;  // number型

このような再帰型は便利ですが、複雑な場合は計算量や処理負荷を考慮する必要があります。

ユニオン型の条件分岐における意図しない拡張

ユニオン型に対して条件型を使用する場合、各要素が個別に評価されます。この特性により、期待とは異なる結果が得られる場合があります。特に、条件型の分岐である extends がユニオン型の各要素に適用されることを理解しておく必要があります。

type Test<T> = T extends string | number ? "Primitive" : "Complex";

この例では、T が string | number のユニオン型であれば、"Primitive" が返されますが、ユニオンの中身によっては、部分的な評価が行われ、期待しない結果を招くことがあります。

例

type Result = Test<string | boolean>;  // "Primitive" | "Complex"

この場合、string は Primitive に分類されますが、boolean は Complex に分類されます。このように、ユニオン型に対する条件型の適用には、評価結果が予期しないものになる場合があるので注意が必要です。

型推論の複雑さ

条件型を複雑にしすぎると、型推論が難しくなり、開発者が型システムの動作を理解しにくくなることがあります。特に、入れ子になった条件型や再帰型が絡むと、型推論が不透明になり、デバッグが困難になることがあります。

type ComplexCondition<T> = T extends number
  ? T extends 0
    ? "Zero"
    : "Non-zero"
  : T extends string
  ? "String"
  : "Unknown";

このような複雑な条件型は、コードの可読性が低下し、型推論が期待通りに動作しない場合があります。

例

type Result1 = ComplexCondition<0>;  // "Zero"
type Result2 = ComplexCondition<number>;  // "Non-zero"

このように、型推論が期待通りに機能しないこともあるため、条件型の複雑さには注意が必要です。

TypeScriptの条件型は、非常に強力で柔軟な機能ですが、その反面、使い方を誤ると意図しない型エラーやパフォーマンス問題を引き起こすことがあります。条件型を効果的に使用するためには、これらの制限と注意点を理解し、適切に対処することが重要です。

条件型を用いた演習問題

条件型を効果的に理解するためには、実際に手を動かしてコードを書き、様々な状況で条件型がどのように動作するかを確認することが重要です。ここでは、TypeScriptの条件型に関する理解を深めるための演習問題をいくつか紹介します。これらの問題に取り組むことで、条件型の柔軟性や型推論の働き方を体験できます。

演習問題 1: 型に基づいて条件分岐を行う

次の TransformType 型を完成させ、T の型に応じて返される型を変えるようにしてください。

type TransformType<T> = T extends number
  ? "Number"
  : T extends string
  ? "String"
  : "Other";

この型定義では、T が number であれば "Number"、string であれば "String"、それ以外であれば "Other" を返します。これをテストしてみましょう。

例

type Test1 = TransformType<number>;  // "Number"
type Test2 = TransformType<string>;  // "String"
type Test3 = TransformType<boolean>; // "Other"

この演習を通じて、複数の条件を組み合わせた条件型の使い方に慣れてみてください。

演習問題 2: オブジェクト型のプロパティに基づく条件分岐

オブジェクトが特定のプロパティを持っているかどうかで、異なる型を返す条件型を作成してみましょう。次の HasAge 型を完成させ、オブジェクトに age プロパティがあるかどうかで結果を変える型を定義してください。

type HasAge<T> = T extends { age: number } ? "Has age" : "No age";

この型は、T が age プロパティを持っている場合に "Has age" を返し、そうでない場合は "No age" を返します。

例

type Person = { name: string; age: number };
type Animal = { name: string };

type Test1 = HasAge<Person>;  // "Has age"
type Test2 = HasAge<Animal>;  // "No age"

オブジェクトのプロパティを条件に使う方法を実践的に学んでください。

演習問題 3: ユニオン型に対する条件型の適用

次に、ユニオン型に対して条件型を適用してみましょう。ユニオン型の各要素に個別に条件が適用されることを確認するために、次の PrimitiveType 型を定義してみましょう。

type PrimitiveType<T> = T extends string | number ? "Primitive" : "Complex";

この型では、T が string または number の場合は "Primitive"、それ以外の場合は "Complex" を返すようにします。

例

type Test1 = PrimitiveType<string>;  // "Primitive"
type Test2 = PrimitiveType<number>;  // "Primitive"
type Test3 = PrimitiveType<object>;  // "Complex"
type Test4 = PrimitiveType<string | object>;  // "Primitive" | "Complex"

この演習を通じて、ユニオン型に対する条件型の挙動を理解してください。

演習問題 4: 再帰的な条件型の実装

再帰的に型を評価する条件型を作成してみましょう。次の FlattenArray 型を完成させ、配列型を再帰的にフラットにする型を定義してください。

type FlattenArray<T> = T extends (infer U)[]
  ? U extends any[]
    ? FlattenArray<U>
    : U
  : T;

この型は、配列を再帰的にフラット化し、最も内側の型を返します。

例

type Test1 = FlattenArray<number[]>;  // number
type Test2 = FlattenArray<number[][][]>;  // number
type Test3 = FlattenArray<string[]>;  // string

この演習で、再帰的な条件型の作り方とその挙動を学んでみてください。

これらの演習問題を通じて、TypeScriptの条件型の使用方法をさらに理解できるはずです。条件型を実際に書いてみることで、理論だけでなく実践的な応用力も高まるでしょう。

まとめ

本記事では、TypeScriptの条件型を使用して型の拡張や制御を行う方法について解説しました。条件型の基本的な構文から始まり、組み込み型との組み合わせ、ネストされた条件型、実際のフロントエンドアプリケーションでの活用例、さらには制限や注意点まで幅広くカバーしました。条件型を適切に活用することで、型安全性を維持しながらも柔軟な型操作が可能になり、複雑なアプリケーションの設計にも対応できます。これらの技術をマスターして、TypeScriptを用いた開発の質をさらに高めてください。