TypeScript Generics入門【型を再利用する最強機能】
TypeScriptを学んでいると必ず出てくる機能があります。
Generics（ジェネリクス）Genericsを理解すると
- 再利用可能な関数が作れる
- 型安全を保てる
- ライブラリの理解が深まる
というメリットがあります。
この記事では
- Genericsとは
- 基本の書き方
- 実務での使い方
を解説します。
Genericsとは？
型を後から指定できる仕組みです。
つまり
「どんな型でも使える関数」を作ることができます。
Genericsを使わない例
例えば次の関数です。
function echo(value: string): string {
return value
}この関数は
stringしか使えませんもし数値を使いたい場合
function echoNumber(value: number): number {
return value
}のように関数を増やす必要があります。
Genericsを使う
Genericsを使うと1つの関数で対応できます。
function echo<T>(value: T): T {
return value
}この
<T>が Generics です。
使用例
echo<string>("hello")
echo<number>(123)結果
hello
123型を自由に指定できます。
型推論
実は型を書かなくてもTypeScriptが推論してくれます。
echo("hello")
echo(123)推論結果
string
number配列でのGenerics
配列でも使えます。
function first<T>(arr: T[]): T {
return arr[0]
}使用例
first([1,2,3])
first(["a","b","c"])複数のGenerics
複数の型も定義できます。
function pair<T, U>(a: T, b: U) {
return [a, b]
}使用例
pair("age", 30)結果
["age",30]Genericsを使ったインターフェース
interfaceでも使えます。
interface Box<T> {
value: T
}使用例
const box: Box<number> = {
value: 100
}Genericsのメリット
1 再利用できる
function identity<T>(value:T):Tどんな型でも使える。
2 型安全
anyとは違い型チェックが行われます。
3 ライブラリでよく使われる
Reactや多くのライブラリでもGenericsが使われています。
Genericsの実例
TypeScriptのArrayも実はGenericsです。
Array<number>
Array<string>つまり
let numbers: Array<number>と書くこともできます。
まとめ
Genericsとは
型を後から指定できる仕組みです。
基本形
function func<T>(value:T):Tこれを使うことで
- 再利用可能なコード
- 型安全な関数
を書くことができます。
Genericsは
TypeScriptで最も重要な機能の1つです。
次回は、TypeScript Utility Types
コメント