TypeScript

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

【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でなければいけない
Pocket
LinkedIn にシェア

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-TypeScript