TypeScriptの型推論：実践的な例で解説

概要：このチュートリアルでは、TypeScriptの型推論について学習します。

型推論とは、明示的に型注釈を付けなくても、TypeScriptがどのように型を推測するか、そしてどこで推測するかを説明するものです。

基本的な型推論

変数を宣言する際に、型注釈を使用して明示的に型を指定できます。例：

let counter: number;Code language: JavaScript (javascript)

しかし、`counter`変数を数値で初期化すると、TypeScriptは`counter`の型を`number`として推論します。例：

let counter = 0;Code language: JavaScript (javascript)

これは次のステートメントと同等です。

let counter: number = 0;Code language: JavaScript (javascript)

同様に、関数パラメータに値を代入すると、TypeScriptはパラメータの型をデフォルト値の型として推論します。例：

function setCounter(max=100) {
    // ...
}Code language: JavaScript (javascript)

この例では、TypeScriptは`max`パラメータの型を`number`として推論します。

同様に、TypeScriptは`increment()`関数の戻り値の型を`number`として推論します。

function increment(counter: number) {
    return counter++;
}Code language: JavaScript (javascript)

これは次のものと同じです。

function increment(counter: number) : number {
    return counter++;
}Code language: JavaScript (javascript)

次の代入を考えてみましょう。

let items = [1, 2, 3, null];Code language: JavaScript (javascript)

`items`変数の型を推論するために、TypeScriptは配列内の各要素の型を考慮する必要があります。

TypeScriptは最適な共通型アルゴリズムを使用して、各候補型を分析し、他のすべての候補と互換性のある型を選択します。

この場合、TypeScriptは、数値またはnullの配列型（`number | null)[]`）を最適な共通型として選択します。`|`は型におけるOR演算子であることに注意してください。

`items`配列に文字列を追加すると、TypeScriptは`items`の型を数値と文字列の配列`(number | string)[]`として推論します。

let items = [1, 2, 3, 'Cheese'];Code language: JavaScript (javascript)

TypeScriptは、変数の位置を使用して型を推論します。このメカニズムはコンテキスト型として知られています。例：

document.addEventListener('click', function (event) {
    console.log(event.button); 
});Code language: JavaScript (javascript)

この例では、TypeScriptは`click`イベントのため、`event`パラメータが`MouseEvent`のインスタンスであることを認識しています。

しかし、`click`イベントを`scroll`イベントに変更すると、TypeScriptはエラーを発生させます。

document.addEventListener('scroll', function (event) {
    console.log(event.button); // compile error
});Code language: JavaScript (javascript)

エラー

Property 'button' does not exist on type 'Event'.(2339)Code language: JavaScript (javascript)

TypeScriptはこの場合の`event`は`MouseEvent`ではなく`UIEvent`のインスタンスであることを認識しています。そして`UIEvent`には`button`プロパティがないため、TypeScriptはエラーをスローします。

コンテキスト型は、関数呼び出しの引数、型アサーション、オブジェクトのメンバと配列リテラル、戻り値、代入の右辺など、多くの場合に見られます。

以下は、型推論と型注釈の違いを示しています。

型推論	型注釈
TypeScriptが型を推測します。	明示的にTypeScriptに型を指示します。

では、型推論と型注釈をいつ使用すべきでしょうか？

実際には、できる限り常に型推論を使用する必要があります。型注釈は次の場合に使用します。

このチュートリアルは役に立ちましたか？