TypeScriptの条件付き型（Conditional Types）とジェネリクスの活用をやさしく解説！初心者でも理解できる型の魔法

1. 条件付き型（Conditional Types）とは？

1. 条件付き型（Conditional Types）とは？

TypeScriptの条件付き型とは、「もしある型が別の型を満たしているならA型、そうでなければB型」といった条件で型を切り替える機能です。型の世界でif文のような動きをする仕組みです。

基本の書き方は次のようになります。

T extends U ? X : Y

これは「TがUを継承（extends）しているならX型、それ以外ならY型」という意味になります。extendsは「TがUの一部かどうか」を判定します。

例えば、次のようなコードを見てみましょう。

type IsString<T> = T extends string ? "文字列です" : "文字列ではありません";

type A = IsString<string>;  // "文字列です"
type B = IsString<number>;  // "文字列ではありません"

この例では、IsStringという型が、「もしTがstringなら“文字列です”」という文字列型を返し、そうでなければ“文字列ではありません”を返します。つまり、型の世界でも条件判断ができるのです。

2. ジェネリクスと条件付き型の組み合わせ

2. ジェネリクスと条件付き型の組み合わせ

条件付き型は単体でも便利ですが、ジェネリクス（Generics）と組み合わせるとさらに強力です。ジェネリクスは「型をパラメータとして受け取る仕組み」で、同じ関数やクラスでも柔軟に型を変えられる特徴があります。

次の例を見てみましょう。

function getValue<T>(value: T): T extends string ? string : number {
    if (typeof value === "string") {
        return value.toUpperCase() as any;
    }
    return 0 as any;
}

const result1 = getValue("hello"); // string型
const result2 = getValue(123);     // number型

この関数では、引数が文字列なら返り値はstring型、数字ならnumber型として扱われます。つまり、getValue()関数は入力の型によって返り値の型が自動的に変化します。

実際に出力結果を確認してみると、次のようになります。

HELLO
0

このように、ジェネリクスと条件付き型を組み合わせることで、「型に応じて結果を変える」ような柔軟な処理ができます。

3. 条件付き型の応用例：配列かどうかを判定する

3. 条件付き型の応用例：配列かどうかを判定する

次に、もう少し実用的な例として「渡された型が配列かどうか」を判定する型を作ってみましょう。

type IsArray<T> = T extends any[] ? "配列です" : "配列ではありません";

type C = IsArray<number[]>; // "配列です"
type D = IsArray<string>;   // "配列ではありません"

このIsArray型は、もし渡された型が配列（any[]）なら「配列です」と判断し、そうでない場合は「配列ではありません」と返します。まさに型の世界のif文ですね。

4. 条件付き型で型を変換する（マッピング的な使い方）

4. 条件付き型で型を変換する（マッピング的な使い方）

条件付き型は、単に真偽を判定するだけでなく、型を別の形に変換するためにも使えます。例えば、配列型から中身の要素型を取り出すような処理です。

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

type E = ElementType<string[]>; // string
type F = ElementType<number>;   // number

infer（インファー）というキーワードを使うと、配列の中の要素型を「推論」して取り出すことができます。もし配列でなければ、そのままの型を返すようになっています。

このように条件付き型を使うと、「型の中身を取り出す」「特定の型に変換する」といった柔軟な型操作が可能になります。

5. 条件付き型を理解するコツ

5. 条件付き型を理解するコツ

条件付き型を理解するポイントは、「型にif文を書いている」とイメージすることです。プログラムの中でifを使うように、型の中でも「もし〜なら」という条件を立てることで、より安全で強力な型チェックができます。

たとえば、APIのレスポンスが文字列かオブジェクトかによって処理を変えたい場合など、条件付き型を使うとコードの安全性が高まり、エラーを防げます。

TypeScriptのジェネリクスと条件付き型を活用することで、現実のアプリケーション開発でも非常に柔軟で堅牢なコードを書くことができるようになります。最初は少し難しく感じますが、使いこなせると型の世界がぐっと広がります。

まとめ

まとめ

条件付き型とジェネリクスを通して見えてきたTypeScriptの型の考え方

この記事では、TypeScriptの条件付き型とジェネリクスを組み合わせた使い方について、基礎から応用まで段階的に学んできました。条件付き型は、型の世界で「もし〜なら」「そうでなければ」という分岐を表現できる仕組みであり、TypeScriptの型システムを深く理解するうえで非常に重要な要素です。従来の型定義では難しかった柔軟な型表現が、条件付き型によって可能になります。

特に、ジェネリクスと組み合わせることで、関数や型定義が受け取る型に応じて返り値の型や構造を変えられる点は、TypeScriptならではの強みと言えます。入力の型と出力の型の関係を明確に表現できるため、コードの可読性と安全性が大きく向上します。これは、規模の大きなアプリケーションやチーム開発においても大きなメリットになります。

条件付き型で実現できる柔軟な型設計

条件付き型を使うことで、「特定の型かどうかを判定する」「配列かどうかを見分ける」「配列なら中身の要素型を取り出す」といった高度な型操作が可能になります。これらはすべて実行時の処理ではなく、コンパイル時の型チェックとして行われるため、実際の動作に影響を与えることなく、バグの混入を防ぐ役割を果たします。

inferを使った型の推論は、最初は少し難しく感じるかもしれませんが、「型の中身を一時的に変数として取り出す仕組み」と考えると理解しやすくなります。条件付き型は、単なる知識として覚えるのではなく、「どんな場面で使えるのか」を意識しながら触れることで、自然と身についていきます。

実務を意識した条件付き型とジェネリクスのサンプル

type ApiResponse<T> = T extends string
    ? { status: "text"; data: string }
    : { status: "object"; data: T };

function handleResponse<T>(value: T): ApiResponse<T> {
    if (typeof value === "string") {
        return { status: "text", data: value } as any;
    }
    return { status: "object", data: value } as any;
}

const res1 = handleResponse("メッセージ");
const res2 = handleResponse({ id: 1, name: "ユーザー" });

この例では、条件付き型を使って、APIレスポンスの型を入力データに応じて変えています。文字列が返ってくる場合とオブジェクトが返ってくる場合を型レベルで明確に分けることで、後続の処理でも安全にデータを扱うことができます。実際のWebアプリケーション開発でも、このような考え方は頻繁に使われます。