TypeScriptのジェネリック制約（extends）で型を絞る方法をわかりやすく解説！

1. ジェネリクスとは？おさらいしてみよう

1. ジェネリクスとは？おさらいしてみよう

まずは簡単に、ジェネリクス（Generics）とは何かをおさらいしましょう。ジェネリクスとは、関数やクラスの中で「どんな型でも使えるようにしつつ、型安全（たんあんぜん）」を保つ仕組みのことです。

例えば、次のようにジェネリック関数を定義すると、numberでもstringでも使うことができます。

function echo<T>(value: T): T {
    return value;
}

console.log(echo(123));      // number型
console.log(echo("Hello"));  // string型

このように、<T> の部分で「型の入れ物」を定義して、関数やクラスの中で使うことができます。

2. ジェネリック制約（extends）とは？

2. ジェネリック制約（extends）とは？

次に登場するのが、今回のテーマであるジェネリック制約（Generic Constraints）です。TypeScriptでは、extendsキーワードを使って「Tはこの型を継承（けいしょう）していること」という制約をかけることができます。

簡単に言うと、「使える型を限定する」ということです。

function printLength<T extends { length: number }>(value: T): void {
    console.log(value.length);
}

printLength("Hello");     // OK（stringはlengthを持っている）
printLength([1, 2, 3]);   // OK（配列もlengthを持っている）
// printLength(123);      // エラー（numberはlengthを持たない）

この例では、T extends { length: number } という制約をつけています。つまり、「Tはlengthプロパティ（プロパティとはオブジェクトの中のデータのこと）を持っていなければならない」というルールです。

そのため、stringやarrayのようにlengthを持つ型はOKですが、numberのようにlengthを持たない型はエラーになります。

3. オブジェクトの型を絞る具体例

3. オブジェクトの型を絞る具体例

では、オブジェクトを使ってもう少し実践的な例を見てみましょう。たとえば、ユーザー情報を扱う関数で、「nameプロパティを必ず持つオブジェクトだけを受け取りたい」とします。

interface User {
    name: string;
}

function greet<T extends User>(user: T): void {
    console.log("こんにちは、" + user.name + "さん！");
}

greet({ name: "太郎" });           // OK
greet({ name: "花子", age: 25 }); // OK（追加のプロパティがあってもOK）
// greet({ age: 25 });            // エラー（nameがないため）

このように、T extends User とすることで、「User型、またはUser型を含む型」であることを条件にできます。つまり、最低限nameプロパティを持っていれば、他のプロパティがあっても問題ありません。

この仕組みを使うことで、型を柔軟にしながらも、最低限必要なデータ構造を保証できます。

4. 複数の型を組み合わせた制約

4. 複数の型を組み合わせた制約

さらに、TypeScriptのジェネリック制約では、複数の条件を組み合わせることもできます。たとえば、「nameとageの両方を持っているオブジェクト」を受け取る関数を作ることもできます。

interface HasName {
    name: string;
}

interface HasAge {
    age: number;
}

function introduce<T extends HasName & HasAge>(person: T): void {
    console.log(`私は${person.name}です。年齢は${person.age}歳です。`);
}

introduce({ name: "太郎", age: 25 });  // OK
// introduce({ name: "花子" });       // エラー（ageがないため）

このように、&（アンパサンド）を使うことで、「両方の条件を満たす型」に絞ることができます。これを交差型（intersection type）と呼びます。

5. クラスでも使えるジェネリック制約

5. クラスでも使えるジェネリック制約

ジェネリック制約は、関数だけでなくクラスでも使うことができます。例えば、データの一覧を管理するクラスで、アイテムにidが必ず存在することを保証したい場合です。

interface HasId {
    id: number;
}

class DataStore<T extends HasId> {
    private items: T[] = [];

    add(item: T) {
        this.items.push(item);
    }

    getAll(): T[] {
        return this.items;
    }
}

const store = new DataStore<{ id: number; name: string }>();
store.add({ id: 1, name: "商品A" });
store.add({ id: 2, name: "商品B" });

console.log(store.getAll());

この例では、T extends HasId により、idプロパティを持つ型しか追加できません。つまり、型の安全性を守りつつ、柔軟に使えるジェネリッククラスを作れるのです。

6. ジェネリック制約を使うメリット

6. ジェネリック制約を使うメリット

ジェネリック制約（extends）を使うことで、以下のようなメリットがあります。

• 型エラーを未然に防げる： 間違った型の値を渡しても、コンパイル時にエラーになる。
• コードの再利用性が高い： 共通の制約を定義すれば、同じルールをいくつもの関数で使える。
• 可読性が高まる： 関数やクラスの意図が明確になる。

TypeScriptの強力な型システムを活用することで、安全でミスの少ないプログラムを作ることができます。

まとめ

まとめ

ジェネリック制約（extends）で得られる深い理解と型設計のポイント

TypeScriptのジェネリック制約は、型を柔軟に扱いながらも確実なルールを持った構造を作りたいときに、とても役立つ仕組みでした。記事の中で登場したように、ジェネリクスはそもそも「どんな型でも扱える便利な箱」のような存在でしたが、ただ自由に使えるだけだと、意図しない値が渡されて不具合につながってしまうことがあります。そこで登場するのが extends を使った制約であり、「この型は必ずこの性質を持っていてほしい」という条件を型に持たせることで、安全に利用できるジェネリック型へと成長させることができます。

特に、{ length: number } を条件とした例では、文字列や配列のように length を持つ型だけが許可されているため、関数の中で必ず length を利用できるという安心感がありました。もし制約がなければ、誤って length を持たない number 型を渡してしまい、実行時にエラーになる可能性があります。ジェネリック制約は、そのような実行時エラーをコンパイル時点で防げるため、TypeScriptらしい安全なプログラミングを実現しています。

また、User インターフェースを使った T extends User の例では、「最低限このプロパティだけは必ず存在する」という条件を定義しつつ、それ以外のプロパティが増えても柔軟に対応できるという、実務でよく使う形を体験しました。データベースのモデルやAPIレスポンスなど、毎回同じキーを持つことが期待される構造は多いため、この制約は非常に実用性が高いと言えるでしょう。

複数の制約を組み合わせる交差型（intersection type）も、実際のプログラミングで非常に重要です。例えば、「必ず name と age を持つ人物データ」のように、複数の特性を同時に表現したいケースは珍しくありません。これを extends A & B のように書くことで、一つの統一された型として扱えるようになります。現実のデータ構造に近い形で型を組めるため、より表現力豊かなプログラムを設計できます。

クラスに制約を適用する例も、制約の強力さを理解するうえで重要な内容でした。たとえば、DataStore クラスに T extends HasId を与えることで、必ず id を持つアイテムだけが追加できる堅牢なデータ管理クラスとなっていました。そのおかげで、リスト管理中に id のないデータが紛れ込む危険性がなくなり、後から扱いやすい安全なコードになります。ジェネリクスに制約を付けることは、単に型の候補を絞るだけでなく、プログラムのロジックを守るための大切な仕組みだと実感できたはずです。

今回のまとめとして、ジェネリック制約の役割は「型を守るガードのような存在」であり、自由度と安全性のバランスをうまくとるために欠かせない技術だと言えます。柔軟に使えるジェネリクスが、制約を持つことで一段と実用的な型へと変わり、実際のアプリケーション開発において強力な味方となります。ここからさらに応用すると、複数制約や条件付き型（conditional types）、mapped types など、もっと豊かな型表現に進んでいけますので、理解した内容をしっかり活かしながら実践していきましょう。

おさらい用のサンプルプログラム

ここでは、記事内で学んだ制約を複数組み合わせ、より実務に近いかたちで使えるジェネリック制約のサンプルを紹介します。

interface HasId {
    id: number;
}
interface HasTitle {
    title: string;
}

class ArticleStore<T extends HasId & HasTitle> {
    private articles: T[] = [];

    add(article: T) {
        this.articles.push(article);
    }

    findById(id: number): T | undefined {
        return this.articles.find(a => a.id === id);
    }
}

const store = new ArticleStore<{ id: number; title: string; content: string }>();
store.add({ id: 1, title: "ジェネリック制約入門", content: "型を絞る方法について解説します。" });
store.add({ id: 2, title: "TypeScriptの型の魅力", content: "柔軟で安全な型の世界を理解しよう。" });

console.log(store.findById(1));

この例では、HasId と HasTitle の両方を満たす型に制約を設けているため、id と title が必ず存在することが保証されます。記事一覧機能など、現実の開発においてよく登場するパターンであり、制約がどれほど役立つかを体感できるはずです。