TypeScript のジェネクリック型

TypeScript のジェネクリック型

JavaのようにTypeScriptにもジェネリック型があります。TとかUとかKとかで表現します。

慣例として大文字1文字ですが、別に2文字でもかまいません。

このTとかを型パラメータと呼びます。ではジェネリック型を使用したクラスを定義します。

class Aaa<T> {
  constructor(private x: T) {}
  public getXXX(): T {
    return this.x;
  }
}
const a = new Aaa<string>('Takahashi');
console.log(a.getXXX()); // Takahashi
const b = new Aaa<number>(20);
console.log(b.getXXX()); // 20

このようにstringにしたりnumberにしたりbooleanにしたりすることができます。

TypeScriptのジェネリック関数

関数にもジェネリック型を使用することができます。

function aaa<U>(x: U): U {
  return x;
}
const ret1 = aaa<string>('Takahashi'); // Uをstring型にする
console.log(ret1); // Takahashi
const ret2 = aaa<number>(20); Uをnummber型にする
console.log(ret2); // 20

TypeScriptの型パラメータに制約をつける

インターフェースを継承して、型パラメータに制約をつけることができます。

以下のように2つインターフェースがあるとします。

interface aaa {
  getName(): string;
}
interface bbb {
  getAge(): number;
}
class Aaa<T extends aaa> {
  getName(): string{
    return 'Takahashi';
  }
}
const a = new Aaa<aaa>();
const b = new Aaa<bbb>(); // コンパイルエラーになる

T extends インターフェースとすることによって、Aaa<bbb>はコンパイルエラーとなります。

引数を配列にする

引数を配列にしたい場合は、U[]としたらよいです。

function aaa<U>(x: U[]): U[] {
  x.length; // エラーにならないことが確認できる
  return x;
}
aaa([1,2,3]); // こんな感じで実行する

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^