【TypeScript】型ガードの使い方と型の絞り込み完全ガイド

1
function printLength(value: string | number) {
2
  // コンパイルエラー: Property 'length' does not exist on type 'number'.
3
  console.log(value.length);
4
}

1
function printLength(value: string | number) {
2
  if (typeof value === "string") {
3
    // このブロック内では value は確実に string 型として扱われる
4
    console.log(value.length);
5
  } else {
6
    // このブロック内では value は number 型に絞り込まれる
7
    console.log(value.toFixed(2));
8
  }
9
}

1
function formatInput(input: string | number | boolean): string {
2
  if (typeof input === "string") {
3
    return input.trim();
4
  }
5
  if (typeof input === "number") {
6
    return input.toLocaleString("ja-JP");
7
  }
8
  return input ? "はい" : "いいえ";
9
}
10

11
console.log(formatInput("  TypeScript  ")); // 出力: TypeScript
12
console.log(formatInput(1234567));          // 出力: 1,234,567
13
console.log(formatInput(true));             // 出力: はい

1
class ApiSuccess {
2
  constructor(public data: string[]) {}
3
}
4

5
class ApiError {
6
  constructor(public message: string, public statusCode: number) {}
7
}
8

9
type ApiResponse = ApiSuccess | ApiError;
10

11
function handleResponse(response: ApiResponse) {
12
  if (response instanceof ApiSuccess) {
13
    console.log(`取得件数: ${response.data.length} 件`);
14
  } else if (response instanceof ApiError) {
15
    console.error(`エラー (${response.statusCode}): ${response.message}`);
16
  }
17
}
18

19
handleResponse(new ApiSuccess(["item1", "item2"])); // 出力: 取得件数: 2 件
20
handleResponse(new ApiError("Not Found", 404));      // 出力: エラー (404): Not Found

1
interface Cat {
2
  name: string;
3
  meow: () => void;
4
}
5

6
interface Dog {
7
  name: string;
8
  bark: () => void;
9
}
10

11
type Pet = Cat | Dog;
12

13
function playWithPet(pet: Pet) {
14
  if ("meow" in pet) {
15
    // pet は Cat 型に絞り込まれる
16
    pet.meow();
17
  } else {
18
    // pet は Dog 型に絞り込まれる
19
    pet.bark();
20
  }
21
}

1
interface UserProfile {
2
  id: string;
3
  name: string;
4
  email: string;
5
}
6

7
// ユーザー定義型ガード関数
8
function isUserProfile(value: unknown): value is UserProfile {
9
  if (typeof value !== "object" || value === null) {
10
    return false;
11
  }
12

13
  const candidate = value as Record<string, unknown>;
14
  return (
15
    typeof candidate.id === "string" &&
16
    typeof candidate.name === "string" &&
17
    typeof candidate.email === "string"
18
  );
19
}

1
function processUserData(data: unknown) {
2
  if (isUserProfile(data)) {
3
    // data は安全に UserProfile 型として扱える
4
    console.log(`ID: ${data.id}, Name: ${data.name}`);
5
  } else {
6
    console.warn("不正なデータ形式です");
7
  }
8
}

1
function isNonNullable<T>(item: T): item is NonNullable<T> {
2
  return item !== null && item !== undefined;
3
}
4

5
const rawList: (string | null | undefined)[] = ["React", null, "Vue", undefined, "Astro"];
6

7
// NonNullable型ガードを使用
8
const cleanList: string[] = rawList.filter(isNonNullable);
9

10
console.log(cleanList); // 出力: [ 'React', 'Vue', 'Astro' ]

1
function assertIsString(val: unknown): asserts val is string {
2
  if (typeof val !== "string") {
3
    throw new TypeError(`期待された型は string ですが、${typeof val} が渡されました`);
4
  }
5
}
6

7
function handleInput(input: unknown) {
8
  // 検証に失敗すると例外がスローされる
9
  assertIsString(input);
10

11
  // これ以降の行では input は string 型として確定する
12
  console.log(input.toUpperCase());
13
}
14

15
handleInput("hello world"); // 出力: HELLO WORLD

1
function assertDefined<T>(val: T, message?: string): asserts val is NonNullable<T> {
2
  if (val === null || val === undefined) {
3
    throw new Error(message ?? "値が存在しません");
4
  }
5
}
6

7
const config: { apiKey?: string } = { apiKey: "secret_token_123" };
8

9
assertDefined(config.apiKey, "APIキーが設定されていません");
10

11
// 以降、config.apiKey は確実に string 型となる
12
console.log(config.apiKey.length);

1
// 危険な例: 実装と型述語が食い違っている
2
function isDangerouslyString(val: unknown): val is string {
3
  // 常に true を返してしまう重大なバグ
4
  return true;
5
}
6

7
const num: unknown = 123;
8
if (isDangerouslyString(num)) {
9
  // コンパイルは通るが、実行時に TypeError: num.toUpperCase is not a function が発生！
10
  console.log(num.toUpperCase());
11
}

1
type Shape =
2
  | { kind: "circle"; radius: number }
3
  | { kind: "square"; sideLength: number };
4

5
function getArea(shape: Shape): number {
6
  switch (shape.kind) {
7
    case "circle":
8
      // 自動的に circle 型に絞り込まれる
9
      return Math.PI * shape.radius ** 2;
10
    case "square":
11
      // 自動的に square 型に絞り込まれる
12
      return shape.sideLength ** 2;
13
  }
14
}