TypeScriptの型推論: 型注釈を書くとき・省くとき

型推論とは、書かなかった型をTypeScriptが導き出すことです。変数を初期化すればその値の型になり、関数から値を返せば戻り値の型もそれに従います。多くのTypeScriptのコードは、思っているよりずっと少ない型注釈で書かれています。

let count = 0;            // number
let language = "TypeScript"; // string
let tags = ["ts", "js"];  // string[]
let user = { name: "Ada", age: 36 }; // { name: string; age: number }

function area(w: number, h: number) {
    return w * h;          // return type inferred as number
}

const size = area(3, 4);  // number
console.log(count, language, tags, user, size);

// The inferred types are enforced like written ones:
// @ts-expect-error: Type 'string' is not assignable to type 'number'.
count = "one";

コメントは、エディターで各名前にカーソルを合わせたときに表示される型です。最後の行は、count に型注釈を書いていないにもかかわらずコンパイルエラー（TS2322）になります。// @ts-expect-error でそのエラーを想定済みとしているので、ブロックの残りは実行されます。

let と const: リテラル型の拡大

const は変更できないので、TypeScriptはいちばん狭い型、つまりリテラルの値そのものを型にします。let はあとで再代入されるかもしれないので、広い型になります。

let a = "left";    // string
const b = "left";  // "left"
let c = 42;        // number
const d = 42;      // 42
const e = true;    // true

これは、特定の値しか受け付けない関数に渡すときに問題になります:

// This does not compile: `let` widened "left" to string.
function move(direction: "left" | "right") {
    console.log("moving", direction);
}

let dir = "left";
move(dir);

const fixed = "left";
move(fixed); // fine: fixed has type "left"

index.ts(7,6): error TS2345: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'.

const を使うか、変数に型注釈を書けば直ります: let dir: "left" | "right" = "left"。リテラル型については専用のページ リテラル型 があります。

オブジェクトと配列はメンバーが拡大される

オブジェクトリテラルのプロパティは変更可能なので、オブジェクト自体が const でも let と同じように拡大されます。配列の要素も同じです。as const を付けるとすべてが readonly になり、リテラル型が保たれます。

const config = { mode: "dark", retries: 3 };
// config: { mode: string; retries: number }
config.mode = "light"; // allowed: mode is string

const frozen = { mode: "dark", retries: 3 } as const;
// frozen: { readonly mode: "dark"; readonly retries: 3 }

const sizes = ["s", "m", "l"];            // string[]
const fixedSizes = ["s", "m", "l"] as const; // readonly ["s", "m", "l"]

console.log(config.mode, frozen.mode, sizes.length, fixedSizes[0]);

戻り値の型推論

関数の戻り値の型は return 文から推論されます。return が複数ある場合は、それらのユニオン型になります。

function parsePort(text: string) {
    if (text === "") return null;
    return Number(text);
}
// parsePort returns number | null

const port = parsePort("8080");
if (port !== null) {
    console.log(port + 1); // 8081: port is number inside the check
}

function log(message: string) {
    console.log(message);
}
// log returns void: there is no return value

log("done");

ほとんどの関数は推論された戻り値の型で問題ありません。シグネチャを契約にしたいエクスポートする関数や公開する関数では、戻り値の型を明示します。そうすれば、本体の変更で違う型を返すようになったとき、どこか離れた呼び出し側ではなくその関数の場所でエラーになります。

文脈的型付け: コールバックは型を受け取る

パラメーターの型は関数の呼び出し方からは推論されません。例外は2つあります。デフォルト値を持つパラメーターはその値の型になります（function retry(times = 3) なら times は number）。また、関数型が期待されている場所に書いた関数は、その文脈からパラメーターの型を受け取るので、コールバックのパラメーターには型注釈が要りません。

const names = ["ada", "grace", "alan"];

// s is string: map on a string[] passes strings
const upper = names.map((s) => s.toUpperCase());

// a and b are strings, the result must be a number
const sorted = [...names].sort((a, b) => a.length - b.length);

// The variable's type gives the arrow its parameter and return types
const greet: (name: string) => string = (n) => `Hello, ${n}`;

console.log(upper, sorted, greet("Ada"));

forEach、filter、reduce、Promise のコールバック、イベントハンドラー、そして関数型が宣言されたパラメーターに渡すあらゆる関数で同じことが起こります。

パラメーターには型注釈が必要

デフォルト値もこうした文脈もない場合、TypeScriptは関数の呼び出し方を見てパラメーターの型を推測したりはしません。strict が有効なら、型注釈のないパラメーターはエラー TS7006 になります:

// This does not compile: a parameter with no type and no context.
function double(x) {
    return x * 2;
}
console.log(double(21));

index.ts(2,17): error TS7006: Parameter 'x' implicitly has an 'any' type.

function double(x: number) と書けばブロックは 42 を出力し、戻り値の型は x * 2 から number と推論されます。

最適共通型

異なる種類の値を含む配列リテラルでは、TypeScriptはそれらの型のユニオンの配列を推論します。書いていない共通の基底型を探すことはしません。

const mixed = [1, "two", null]; // (string | number | null)[]
const nums = [1, 2.5, -3];      // number[]

class Animal { name = "animal"; }
class Dog extends Animal { bark() { return "woof"; } }
class Cat extends Animal { meow() { return "meow"; } }

const pets = [new Dog(), new Cat()];            // (Cat | Dog)[]
const animals: Animal[] = [new Dog(), new Cat()]; // annotate to get Animal[]

console.log(mixed.length, nums, pets.length, animals[0].name);

注意が必要なのは空の配列です。const list = [] は「進化する」配列として始まり、push するたびに型が広がります。const list: string[] = [] と型注釈を書けば意図が最初から明確になり、読みやすくなります。

型注釈を書くべきとき

推論された型をいちばん手早く確認するには、エディターで名前にカーソルを合わせます。エディターがない場合は、const probe: boolean = mixed; のように値を違う型の変数に代入すれば、コンパイラーのエラーメッセージに推論された型が表示されます。