TypeScriptの複数型パラメータを使ったジェネリック関数の書き方を徹底解説！初心者でもわかるGenerics活用術

1. TypeScriptのジェネリック関数とは？

1. TypeScriptのジェネリック関数とは？

まず、TypeScriptのジェネリック関数（Generics）とは、関数をいろいろな型に対応させるための仕組みです。ジェネリクスを使うことで、「型の再利用」や「型安全性（たとえば、型ミスを防ぐこと）」を実現できます。

普通の関数では引数や戻り値の型を固定しますが、ジェネリックを使うと、呼び出し時に型を指定できるようになります。

例えば、次のように使います。

function identity<T>(value: T): T {
    return value;
}
console.log(identity<string>("Hello"));
console.log(identity<number>(123));

このように<T>という型パラメータを指定することで、同じ関数を文字列でも数値でも使えるようになります。

2. 複数の型パラメータを使うとは？

2. 複数の型パラメータを使うとは？

次に、複数の型パラメータを使う方法を見ていきましょう。型パラメータを複数使うと、異なる型の引数を受け取り、それぞれに型安全な処理を行うことができます。

書き方はとても簡単で、ジェネリックの型パラメータをカンマで区切って並べるだけです。

function combine<T, U>(first: T, second: U): string {
    return `1つ目: ${first}, 2つ目: ${second}`;
}

このcombine関数は、2つの異なる型の引数を受け取って文字列に変換します。呼び出し時には、次のようにして使います。

console.log(combine<string, number>("年齢", 25));
console.log(combine<number, boolean>(100, true));

    1つ目: 年齢, 2つ目: 25
    1つ目: 100, 2つ目: true

このように、複数の型を安全に扱うことができます。

3. 型推論で自動的に型を判断できる

3. 型推論で自動的に型を判断できる

実は、TypeScriptの型推論（Type Inference）によって、型パラメータを明示的に指定しなくても自動的に判断してくれます。

つまり、次のように書いても同じ結果になります。

console.log(combine("年齢", 25));
console.log(combine(100, true));

TypeScriptが「引数の型」から自動でTとUの型を判断してくれるため、開発者は型を手動で指定する必要がありません。

4. 現実的な例：キーと値を組み合わせる関数

4. 現実的な例：キーと値を組み合わせる関数

複数型パラメータを使うと、実務でよくある「データをペアにする」ような処理も簡単に作れます。例えば、キーと値をペアにする関数を作ってみましょう。

function makePair<K, V>(key: K, value: V): { key: K; value: V } {
    return { key, value };
}

const pair1 = makePair("名前", "田中");
const pair2 = makePair("年齢", 25);

console.log(pair1);
console.log(pair2);

    { key: '名前', value: '田中' }
    { key: '年齢', value: 25 }

この関数では、キーと値の型をそれぞれ独立して定義できるため、文字列・数値・真偽値など、どんな型の組み合わせでも安全に扱えます。

5. 型パラメータに名前をつけるコツ

5. 型パラメータに名前をつけるコツ

複数の型パラメータを使うときには、分かりやすい名前をつけることも大切です。たとえば、<T, U>の代わりに、<KeyType, ValueType>などとすると、コードの意味がはっきりします。

function makePair<KeyType, ValueType>(key: KeyType, value: ValueType) {
    return { key, value };
}

このように名前をつけると、後でコードを読むときにも理解しやすくなります。

6. 複数型パラメータのポイント

6. 複数型パラメータのポイント

• 複数型パラメータは<T, U, V>のようにカンマ区切りで指定する。
• それぞれの型が独立して動作するため、異なる型を安全に扱える。
• 型推論により、明示的に指定しなくても自動で判断される。
• コードの可読性を上げるため、わかりやすい型名をつけると良い。

このようにTypeScriptの複数型パラメータを使うことで、より柔軟で再利用性の高い関数を作ることができます。

まとめ

まとめ

複数型パラメータで広がるTypeScriptの表現力と柔軟性

今回の記事では、TypeScriptのジェネリック関数における複数型パラメータの役割と、その具体的な活用方法について詳しく振り返りました。ジェネリクスはもともと「型を柔軟に扱いながら型安全性を保つ」という目的で用意された仕組みですが、複数の型パラメータを用いることで、より複雑なデータ構造や実務的なロジックに適した関数設計が可能になります。特に、キーと値をセットで扱う関数、異なる型を同時に受け取る関数、複数の意味を持つデータを組み合わせる関数など、さまざまな場面で活用できます。

記事中の例でも紹介したように、複数の型を組み合わせる基本的な構文はとてもシンプルです。たとえば、<T, U>とカンマ区切りで並べるだけで、二つの型を同時に扱う関数を作ることができます。この書き方は簡単でありながら、関数の活用範囲を一気に広げ、複雑な型の組み合わせにも対応できる大変強力な書き方です。さらに、型推論によって型指定を省略しても動作するため、初心者でも安心して使い始めることができます。

また、複数型パラメータを採用する場面では、型名の付け方も重要になります。TやUといった短い型名は便利ですが、明確さが必要な場合にはKeyTypeやValueTypeのようにわかりやすい名前を使うことで、コード全体の読みやすさが格段に向上します。特にチーム開発や長期運用されるプロジェクトにおいては、こうした配慮がバグの防止やメンテナンス効率を高めることにつながります。

複数型パラメータを使ったジェネリック関数は、日常的に使われるキーと値のセット構造、APIレスポンスに含まれる複数項目の組み合わせ、異なる型の関連性を保ちながら処理する場面など、現実のシステム開発において役立つ場面が非常に多いことも理解できました。特に、データの種類が増えるほどジェネリクスの価値は高まり、型安全性を確保したまま効率のよい関数設計ができるようになります。

以下では、記事で学んだ内容を踏まえつつ、より応用的なサンプルコードを一つまとめておきます。複数型パラメータを使いながら、わかりやすい型名で設計した例として参考になるでしょう。

// 複数型パラメータで柔軟にペアを構築するサンプル
function createEntry<KeyType, ValueType>(
    key: KeyType,
    value: ValueType
): { key: KeyType; value: ValueType } {
    return { key, value };
}

const entry1 = createEntry("商品名", "りんご");
const entry2 = createEntry("在庫数", 120);
const entry3 = createEntry("割引対象", true);

console.log(entry1);
console.log(entry2);
console.log(entry3);

上記のように、型パラメータに意味のある名前をつけることで、コードを読む人にとって非常に理解しやすい形になります。さらに、ジェネリック関数が受け取る型の組み合わせを固定せず、多様なデータに対応できるため、再利用性の高い関数を自然に設計できる点も魅力です。TypeScriptが提供する型推論機能も相まって、型指定を省略しながら扱えるため、初心者から上級者まで幅広く使いやすいスタイルだと言えます。

今回の記事で触れた内容は、TypeScriptの型システムの中でも特に応用範囲が広い部分です。型パラメータの数が増えると難しさを感じるかもしれませんが、構造を理解してサンプルコードを何度も読み返すことで、自然と習得できるようになります。日常のコーディングでも「異なる型の組み合わせをきれいに扱いたい」と感じる場面は多くありますので、今回学んだ複数型パラメータの知識を取り入れてみると、より洗練された関数設計ができるようになります。