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;
};ここまでお読みいただきありがとうございました！！