背景
最近TypeScriptを扱っているがなんとなく使っていることが多く、もっと理解した上で仕事に活かしたかったため、改めて自分なりに学習しまとめてみました。
シグネチャ
メソッド名、パラメータの型、戻り値の型などで構成された組み合わせのこと。
インデックスシグネチャ
[key: T]: U
上記の構文のことをインデックスシグネチャという。この構文はオブジェクトがより多くのキーを含む可能性があることをTypeScriptに伝えており、読み方は「このオブジェクトについては、型Tの全てのキーは、型Uの値を持たなければならない」。
- 型Tの部分はnumberかstringしか使用できない。
- keyの部分は任意の言葉が使用できる。
使用例
const onigiri: {
[okazu: string]: number
} = {
'okaka': 2,
'tsuna': 5
}
呼び出しシグネチャ
- 関数そのものの型のこと。
- アロー関数と似ている。
- 関数を引数として渡す場合や、関数を別の関数から返す場合の片付けに使用する。
(a: number, b: number) => number
使用例
type Log = (message: string, userId: string) => void
const log: Log = (message, userId) => {
console.log(userId, message)
}
オーバーロード
オーバーロードとは、メソッド名と戻り値の型が同じで、引数の型や数、並び順が違うメソッドを2つ以上定義すること。複数の呼び出しシグネチャを持つ関数。
使用例
type Origiri = {
(kome: string, gu: string, nori: boolean): void
(kome: string, gu: string): void
}
ジェネリック型(総称型)
複数の場所で型レベルの制約を強制するために使用される。
あらゆる型で同じコードを使うときに使用するため、型の安全性とコードの共通化が両立できる。
使用例
type Onigiri = {
<T>(array: T[]): T
}
let onigiri: Onigiri = (array) => {
return array[0]
}
onigiri<string>(['okaka', 'tsuna', 'ume']);
TypeScriptがどのようにバインド(型の紐付け)を行うのかを下記に示す。
- TypeScriptはarrayが何らかの型の配列であると理解する。
- onigiri関数の実行時にTypeScriptが渡した型から判断する。
- 配列['okaka', 'tsuna', 'ume']からシグネチャに現れるTは全てstringに違いないと判断する。