TypeScript_ジェネリクスの使い方　#258日目

genericとは「一般的な」という意味の言葉で、医学用語では後発薬を意味して使用されると思います。

プログラミング用語でのGENERICSとはJAVAやTypeScriptで用いられる言語仕様で、実行側コードからクラスの要素の型を指定できるものです。つまり、実際に利用されるまで型が確定しないクラス・関数・インターフェイスを実現するために使用できます。

GENERICSは<T>や<U>で表現します。<>の中の文字列は任意ですが、慣例的にTやUを用いるようです。見た方が早いのでコードにしてみます。

functionで定義する場合は以下のように書きます。

function funcX<T>(args: T): T {
    return args;
}

constで定義する場合は以下のように書きます。

const funcY = <T>(args: T): T => args;

上記の通り、関数を定義するところでは型を定めていません。GENERICSでは実行側で型を定義します。実際に上記関数を実行するコードを書いてみます。

// string型で実行する
let resultX = funcX<string>("Hello World");

// number型で実行する
let resultY = funcY<number>(200);

// オブジェクト型で実行する
let result3 = funcX<{ name: string }>({ name: 'YM202110' });

もちろん2つ以上の別々の型をGENERICSで受け取れるようにしておくことも可能です。以下のように<>の中の変数を増やします。

function funcs<T, U>(arg1: T, args2: U): [T, U] {
    return [arg1, args2];
}

実行側で型を定義します。

let result4 = funcs<string, number>("Hello", 100);
let result5 = funcs('Hello', 100);

ちなみに型エイリアスやインターフェイスも渡せます。型エイリアスを2つ渡すパターンで記述してみます。

// 型エイリアス
type PersonFirst = {
    firstName: string;
    age: number;
    height: number;
};

type PersonLast = {
    lastName: string;
    age: number;
    weight: number;
};


// GENERICSで関数を定義
function funcs<T, U>(arg1: T, args2: U): [T, U] {
    return [arg1, args2];
}


// 実行側で型エイリアスを渡す
let result6 = funcs<PersonFirst, PersonLast>(
    { firstName: "YM", age: 30, height: 165 },
    { lastName: "202110", age: 30, weight: 60 }
);

GENERICSで指定できる型に制限を加えたい場合、extendsを利用できます。stringとnumberだけTに型指定できるように制限します。

const funcZ = <T extends string | number>(args: T): T => {
    return args;
};

ここまでお読みいただきありがとうございました！！

参考

【TypeScript】Generics(ジェネリックス)を理解する - Qiita

GENERICSとは ジェネリクス： - IT用語辞典バイナリ