【Generics】TypeScriptの高度な型 ジェネリクスは？ ① 変数の ジェネリクス

TypeScriptにはGenericsと呼ばれる高度な型を定義することができます。

元々、型を定義付けるのは、その変数や関数が、特定の型の値だけが付与されることを、

保証するものですが、

コーディングをしていると、型定義するときは、どんな型が欲しいかは保留にしておいて、

呼び出すときに型を指定してもらいたいという局面があるかもしれません。

つまり、TypeScriptのGenericsを使うと、型定義を遅延することができます。

実際に見ていきましょう。

下記のようにジェネリスクを利用する型を宣言します。

基礎的なTypeScriptのジェネリスクの使用方法

interFace Box<t> {
value: T
}

これを利用するには、

const box0: Box = {value: 'test'} // エラー、ジェネリクスを指定していない
const box1: Box<string> = {value: 'test'}
const box2: Box<number> = {value: 'test'} // エラー、number型でなければいけない

こんな感じです。

一番上は型が未定義で呼び出されてるのでエラー、一番下はナンバー型でBoxを指定しているのに文字列が引数に渡されたのでエラーになっています。

このように、ジェネリクスを使うと、呼び出すときに型を指定することができるので、曖昧なまま変な値が混入する心配が減りますし、

より柔軟な変数やクラスを作ることができます。

TypeScriptのジェネリスクでは初期型を指定することも可能

またTypeScriptのジェネリスクでは初期型を指定することも可能です。

interface Box<T = string> {
 value: T
}

ジェネリクスの初期値が設定されてる場合は、呼び出し時に型を省くことができます。

const box0: Box = {value: 'test'} 
const box2: Box<string> = {value: 'test'}
const box3: Box<number> = {value: 'test'} //エラー、number型でなければいけない

TypeScriptのジェネリスクではextendsを使うことで制約をつけることも可能

またTypeScriptのジェネリスクではextendsを使うことで制約をつけることも可能です。

interface Box<T extends string | number> {
 value: T
}

このインターフェイスでは、string型とnumber型だけが呼び出し時に引数として渡せます。

const box0: Box<string> = {value: 'test'}
const box1: Box<number> = {value: 0}
const box1: Box<boolean> = {value: true} //エラー、stringかnumberでなければいけない