08.1 typeof と instanceof

if を書くと型が変わる

TypeScript は条件分岐の中で型を絞り込みます。これを制御フロー解析と呼びます。

function show(id: string | number) {
	// ここでは string | number

	if (typeof id === "string") {
		console.log(id.toUpperCase());    // ここでは string
	} else {
		console.log(id.toFixed(2));       // ここでは number
	}
}

typeof で判定できるもの

if (typeof x === "object" && x !== null) { /* ... */ }

instanceof — クラスの判定

class ApiError extends Error {
	constructor(public status: number, message: string) {
		super(message);
	}
}

function handle(e: unknown) {
	if (e instanceof ApiError) {
		console.log(e.status);       // ApiError として扱える
	} else if (e instanceof Error) {
		console.log(e.message);      // Error として扱える
	}
}

08.2 in と真偽値による絞り込み

in — プロパティの有無で判定する

type Dog = { bark: () => void };
type Cat = { meow: () => void };

function speak(animal: Dog | Cat) {
	if ("bark" in animal) {
		animal.bark();      // Dog
	} else {
		animal.meow();      // Cat
	}
}

真偽値による絞り込み

function show(name: string | undefined) {
	if (name) {
		console.log(name.toUpperCase());   // string（undefined が除かれた）
	}
}

if (name !== undefined) { /* "" も通る */ }
if (name != null)       { /* null と undefined だけを除く */ }

絞り込みが消える場面

絞り込みは再代入やコールバックをまたぐと失われます。

function f(v: string | undefined) {
	if (!v) return;
	// ここでは string

	[1, 2].forEach(() => {
		console.log(v.toUpperCase());   // OK（v は const 相当）
	});
}

function g(obj: { v?: string }) {
	if (!obj.v) return;
	// ここでは obj.v は string

	setTimeout(() => {
		console.log(obj.v.toUpperCase());
		//              ~
		// error TS18048: 'obj.v' is possibly 'undefined'.
		// （間に obj.v が変わる可能性があるため）
	});
}

プロパティは変わりうるため、絞り込みが保持されません。ローカル変数に取り出すと解決します。

function g(obj: { v?: string }) {
	const v = obj.v;
	if (!v) return;
	setTimeout(() => console.log(v.toUpperCase()));   // OK
}

08.3 判別可能ユニオン

実務で最もよく使う設計

共通のプロパティに、それぞれ別のリテラル型を持たせます。そのプロパティを見れば、どれなのか判定できます。

type Result =
	| { status: "success"; data: string }
	| { status: "error"; message: string }
	| { status: "loading" };

function show(r: Result) {
	switch (r.status) {
		case "success":
			console.log(r.data);       // data がある
			break;
		case "error":
			console.log(r.message);    // message がある
			break;
		case "loading":
			console.log("読み込み中");
			break;
	}
}

なぜこの形にするか

// 悪い例 — すべて省略可能にしてしまう
type Result = {
	status: "success" | "error" | "loading";
	data?: string;
	message?: string;
};

動かしてみる

// discriminated.ts
type Shape =
	| { kind: "circle"; radius: number }
	| { kind: "rect"; width: number; height: number };

function area(s: Shape): number {
	switch (s.kind) {
		case "circle": return Math.PI * s.radius ** 2;
		case "rect":   return s.width * s.height;
	}
}

console.log(area({ kind: "circle", radius: 2 }).toFixed(2));
console.log(area({ kind: "rect", width: 3, height: 4 }));

$ npx tsx discriminated.ts
12.57
12

08.4 型ガード関数

絞り込みを関数に切り出す

判定を関数にすると、戻り値の型を x is T と書くことで絞り込みを伝えられます。

type User = { name: string; age: number };

function isUser(v: unknown): v is User {
	if (typeof v !== "object" || v === null) return false;
	const o = v as Record<string, unknown>;
	return typeof o.name === "string" && typeof o.age === "number";
}

const data: unknown = JSON.parse('{"name":"Alice","age":30}');

if (isUser(data)) {
	console.log(data.name);      // User として扱える
}

配列の絞り込み

const values: (string | undefined)[] = ["a", undefined, "b"];

// filter だけでは型が変わらない
const a = values.filter((v) => v !== undefined);     // (string | undefined)[]

// 型ガードを書くと変わる
const b = values.filter((v): v is string => v !== undefined);   // string[]

assert 関数

asserts を使うと、「ここを通過したら確定している」という形も書けます。

function assertIsUser(v: unknown): asserts v is User {
	if (!isUser(v)) {
		throw new Error("User の形ではありません");
	}
}

const data: unknown = JSON.parse(text);
assertIsUser(data);
console.log(data.name);      // ここでは User

08.5 never による網羅性チェック

分岐の漏れをコンパイル時に見つける

never は「ありえない型」です。すべての分岐を書き切れば、最後には never だけが残ります。

type Shape =
	| { kind: "circle"; radius: number }
	| { kind: "rect"; width: number; height: number };

function area(s: Shape): number {
	switch (s.kind) {
		case "circle": return Math.PI * s.radius ** 2;
		case "rect":   return s.width * s.height;
		default: {
			const _exhaustive: never = s;     // ここに来るはずがない
			throw new Error(`未対応の形状: ${JSON.stringify(_exhaustive)}`);
		}
	}
}

種類を増やすとエラーになる

type Shape =
	| { kind: "circle"; radius: number }
	| { kind: "rect"; width: number; height: number }
	| { kind: "triangle"; base: number; height: number };   // ← 追加した

// area の default 節でエラーになる
//   const _exhaustive: never = s;
//         ~~~~~~~~~~~
// error TS2322: Type '{ kind: "triangle"; base: number; height: number; }'
//               is not assignable to type 'never'.
//
// 訳: 型 '{ kind: "triangle"; ... }' を型 'never' に割り当てることはできません。

動かしてみる

// exhaustive.ts
type Event =
	| { type: "click"; x: number; y: number }
	| { type: "key"; code: string }
	| { type: "close" };

function describe(e: Event): string {
	switch (e.type) {
		case "click": return `クリック (${e.x}, ${e.y})`;
		case "key":   return `キー ${e.code}`;
		case "close": return "閉じる";
		default: {
			const _exhaustive: never = e;
			throw new Error(`未対応のイベント: ${JSON.stringify(_exhaustive)}`);
		}
	}
}

console.log(describe({ type: "click", x: 10, y: 20 }));
console.log(describe({ type: "key", code: "Enter" }));
console.log(describe({ type: "close" }));

$ npx tsx exhaustive.ts
クリック (10, 20)
キー Enter
閉じる

if 文でも使える

function describe(e: Event): string {
	if (e.type === "click") return `クリック (${e.x}, ${e.y})`;
	if (e.type === "key")   return `キー ${e.code}`;
	if (e.type === "close") return "閉じる";

	const _exhaustive: never = e;
	throw new Error(`未対応: ${JSON.stringify(_exhaustive)}`);
}