【TypeScript】型の絞り込み（Type Narrowing）完全ガイド｜typeof・instanceof・in・ユーザー定義型ガードまで

この記事で学べること

• 型の絞り込み（Narrowing）の仕組みと制御フロー解析の基本概念
• typeof による8つのプリミティブ型判定と注意点
• 真偽値チェック（Truthiness Narrowing）と等価性チェック（Equality Narrowing）
• in 演算子・instanceof によるオブジェクト型の絞り込み
• 代入による絞り込み（Assignment Narrowing）の仕組み
• Discriminated Unions（判別可能なユニオン型）の設計パターン
• never 型と網羅性チェック（Exhaustive Check）
• ユーザー定義型ガード（is）と Assertion Functions（asserts）
• Optional Chaining（?.）・Nullish Coalescing（??）・satisfies 演算子
• 制御フロー解析の限界と回避策（コールバック、クロージャ、非同期処理）
• 実務パターン集（APIレスポンス判定、エラーハンドリング、フォームバリデーション、State Machine）
• 型の絞り込み手法の使い分け判断フローチャート

前提知識：この記事はTypeScriptの基本的な型（string、number、Union型など）を理解している方を対象としています。型の基本から学びたい方は【TypeScript】型の書き方 完全入門を先にお読みください。

function printValue(value: string | number) {
  // エラー: Property 'toUpperCase' does not exist on type 'string | number'
  console.log(value.toUpperCase());
}

function printValueSafe(value: string | number) {
  if (typeof value === "string") {
    // ここでは value は string 型に絞り込まれる
    console.log(value.toUpperCase()); // OK
  } else {
    // ここでは value は number 型に絞り込まれる
    console.log(value.toFixed(2)); // OK
  }
}

function example(value: string | number | null) {
  // ここでは value: string | number | null

  if (value === null) {
    // ここでは value: null
    return;
  }

  // ここでは value: string | number（nullが除外された）

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

型の絞り込みが発生する主なパターン

• typeof 演算子（プリミティブ型の判定）
• 真偽値チェック（if (value)、!!、Boolean()）
• 等価性チェック（===、!==、==、!=、switch）
• in 演算子（プロパティの存在確認）
• instanceof 演算子（クラスインスタンスの判定）
• 代入（Assignment）
• Discriminated Unions（判別可能なユニオン型）
• ユーザー定義型ガード（isキーワード）
• Assertion Functions（assertsキーワード）

function padLeft(value: string, padding: string | number): string {
  if (typeof padding === "number") {
    // padding: number
    return " ".repeat(padding) + value;
  }
  // padding: string
  return padding + value;
}

console.log(padLeft("Hello", 4));      // "    Hello"
console.log(padLeft("Hello", ">> ")); // ">> Hello"

function processInput(input: string | number | boolean) {
  if (typeof input === "string") {
    // input: string
    return input.trim().toLowerCase();
  }
  if (typeof input === "number") {
    // input: number
    return input.toFixed(2);
  }
  // input: boolean（string と number が除外された）
  return input ? "yes" : "no";
}

function processObject(value: object | null | string) {
  if (typeof value === "object") {
    // 注意: value は object | null（null が残っている！）
    // value.toString(); // エラーの可能性
  }
}

// 正しい方法: null チェックを先に行う
function processObjectSafe(value: object | null | string) {
  if (value !== null && typeof value === "object") {
    // value: object（null が確実に除外された）
    console.log(value.toString()); // OK
  }
}

注意：typeof null === "object" はJavaScriptの仕様上のバグですが、後方互換性のため修正されていません。オブジェクト判定の際は必ず null チェックを組み合わせましょう。

function getLength(value: string | string[]): number {
  if (typeof value === "string") {
    // value: string
    return value.length;
  }
  // ここに到達 = value は string[] に絞り込まれる
  return value.length;
}

function printName(name: string | null | undefined) {
  if (name) {
    // name: string（null と undefined が除外された）
    console.log("Hello, " + name.toUpperCase());
  }
}

// 配列の要素チェックにも使える
function getFirstElement<T>(arr: T[] | undefined): T | undefined {
  if (arr) {
    // arr: T[]（undefined が除外された）
    return arr[0];
  }
  return undefined;
}

注意：Truthiness Narrowing は 0、""（空文字列）、NaN も falsy として扱います。数値の 0 や空文字列が有効な値である場合は、!== null や !== undefined で明示的にチェックしましょう。

function processValues(values: (string | null | undefined)[]) {
  // filter + Boolean で null/undefined を除外
  const validValues = values.filter(Boolean);
  // validValues: (string | null | undefined)[]
  // ※ TypeScript 5.5以降では string[] に推論される
}

// 明示的な型ガード関数を使う方が確実
function isNotNullish<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}

const definitelyStrings = values.filter(isNotNullish);
// definitelyStrings: string[]

function handleError(error: Error | null) {
  if (!error) {
    // error: null（Error が除外された）
    console.log("No error");
    return;
  }
  // error: Error（null が除外された）
  console.log(error.message);
}

function compare(a: string | number, b: string | boolean) {
  if (a === b) {
    // a と b が === で一致する = 両方とも string
    // a: string, b: string
    console.log(a.toUpperCase()); // OK
    console.log(b.toUpperCase()); // OK
  }
}

function greet(name: string | null | undefined) {
  if (name !== null && name !== undefined) {
    // name: string
    console.log("Hello, " + name);
  }
}

// == null は null と undefined の両方をチェックする
function greetShort(name: string | null | undefined) {
  if (name != null) {
    // name: string（null と undefined の両方が除外される）
    console.log("Hello, " + name);
  }
}

ポイント：== null（緩い等価）を使うと、null と undefined の両方を一度にチェックできます。これはTypeScriptの公式ドキュメントでも推奨されているイディオムです。

type Direction = "up" | "down" | "left" | "right";

function move(direction: Direction) {
  switch (direction) {
    case "up":
      // direction: "up"
      console.log("Moving up");
      break;
    case "down":
      // direction: "down"
      console.log("Moving down");
      break;
    case "left":
      // direction: "left"
      console.log("Moving left");
      break;
    case "right":
      // direction: "right"
      console.log("Moving right");
      break;
  }
}

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    // animal: Fish
    animal.swim();
  } else {
    // animal: Bird
    animal.fly();
  }
}

interface Admin {
  name: string;
  role: "admin";
  permissions: string[];
}

interface User {
  name: string;
  role: "user";
}

function showInfo(person: Admin | User) {
  console.log(person.name); // OK（共通プロパティ）

  if ("permissions" in person) {
    // person: Admin
    console.log("Permissions:", person.permissions);
  }
}

interface Dog {
  bark: () => void;
  breed?: string; // オプショナル
}

interface Cat {
  meow: () => void;
  breed?: string; // オプショナル（両方にある）
}

function handlePet(pet: Dog | Cat) {
  // breed は両方の型にオプショナルで存在するため、絞り込めない
  if ("breed" in pet) {
    // pet: Dog | Cat（絞り込まれない）
  }

  // 一方にしかないプロパティで絞り込む
  if ("bark" in pet) {
    // pet: Dog（正しく絞り込まれる）
    pet.bark();
  }
}

ポイント：in 演算子はオブジェクト型の絞り込みに適しています。一方の型にしか存在しないプロパティで判定するのがベストプラクティスです。両方の型に存在するプロパティでは絞り込みが効かない場合があります。

function logValue(value: Date | string) {
  if (value instanceof Date) {
    // value: Date
    console.log(value.toISOString());
  } else {
    // value: string
    console.log(value.toUpperCase());
  }
}

function handleError(error: unknown) {
  if (error instanceof TypeError) {
    // error: TypeError
    console.log("TypeError:", error.message);
  } else if (error instanceof RangeError) {
    // error: RangeError
    console.log("RangeError:", error.message);
  } else if (error instanceof Error) {
    // error: Error
    console.log("Error:", error.message);
  } else {
    // error: unknown
    console.log("Unknown error:", error);
  }
}

注意：エラー型の instanceof チェックでは、サブクラスの判定を先に書きましょう。TypeError は Error のサブクラスなので、Error の判定を先に書くとすべてのエラーがそこでマッチしてしまいます。

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

class ValidationError extends Error {
  constructor(
    message: string,
    public field: string
  ) {
    super(message);
  }
}

function handleAppError(error: Error) {
  if (error instanceof HttpError) {
    // error: HttpError
    console.log(`HTTP ${error.statusCode}: ${error.message}`);
  } else if (error instanceof ValidationError) {
    // error: ValidationError
    console.log(`Validation failed on ${error.field}: ${error.message}`);
  } else {
    // error: Error
    console.log(`Unexpected error: ${error.message}`);
  }
}

let value: string | number;

value = "hello";
// ここでは value: string
console.log(value.toUpperCase()); // OK

value = 42;
// ここでは value: number
console.log(value.toFixed(2)); // OK

const message = "hello";
// message の型: "hello"（リテラル型）

let greeting = "hello";
// greeting の型: string（let なので広い型に推論される）

// as const で配列やオブジェクトもリテラル型に
const colors = ["red", "green", "blue"] as const;
// colors の型: readonly ["red", "green", "blue"]

interface ApiResponse {
  status: "success" | "error";
  data?: unknown;
  error?: string;
}

function processResponse(response: ApiResponse) {
  const { status, data, error } = response;

  if (status === "success") {
    // status: "success"
    console.log("Data:", data);
  } else {
    // status: "error"
    console.log("Error:", error);
  }
}

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

interface Triangle {
  kind: "triangle";
  base: number;
  height: number;
}

type Shape = Circle | Rectangle | Triangle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      // shape: Circle
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      // shape: Rectangle
      return shape.width * shape.height;
    case "triangle":
      // shape: Triangle
      return (shape.base * shape.height) / 2;
  }
}

ポイント：Discriminated Unions の3つの要件: (1) 共通のプロパティ名を持つ（判別子）、(2) そのプロパティがリテラル型である、(3) Union型でまとめられている。この3つが揃うと、TypeScriptは switch や if で完全な型の絞り込みを行えます。

interface SuccessResponse<T> {
  status: "success";
  data: T;
}

interface ErrorResponse {
  status: "error";
  message: string;
  code: number;
}

interface LoadingResponse {
  status: "loading";
}

type ApiResponse<T> = SuccessResponse<T> | ErrorResponse | LoadingResponse;

function handleResponse<T>(response: ApiResponse<T>) {
  switch (response.status) {
    case "success":
      console.log("Data:", response.data);
      break;
    case "error":
      console.log(`Error ${response.code}: ${response.message}`);
      break;
    case "loading":
      console.log("Loading...");
      break;
  }
}

type AppEvent =
  | { type: "click"; x: number; y: number }
  | { type: "keypress"; key: string }
  | { type: "scroll"; scrollY: number };

function handleEvent(event: AppEvent) {
  switch (event.type) {
    case "click":
      console.log(`Clicked at (${event.x}, ${event.y})`);
      break;
    case "keypress":
      console.log(`Key pressed: ${event.key}`);
      break;
    case "scroll":
      console.log(`Scrolled to ${event.scrollY}`);
      break;
  }
}

type FetchState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };

function renderState<T>(state: FetchState<T>): string {
  switch (state.status) {
    case "idle":
      return "Click to load";
    case "loading":
      return "Loading...";
    case "success":
      return `Data: ${JSON.stringify(state.data)}`;
    case "error":
      return `Error: ${state.error.message}`;
  }
}

type Shape = Circle | Rectangle | Triangle;

// 網羅性チェック用のヘルパー関数
function assertNever(value: never): never {
  throw new Error(`Unexpected value: ${JSON.stringify(value)}`);
}

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
    case "triangle":
      return (shape.base * shape.height) / 2;
    default:
      return assertNever(shape);
  }
}

// 新しい図形を追加
interface Pentagon {
  kind: "pentagon";
  sideLength: number;
}

type Shape = Circle | Rectangle | Triangle | Pentagon;

// getArea 関数でコンパイルエラーが発生！
// Argument of type 'Pentagon' is not assignable to parameter of type 'never'
// → "pentagon" の case を追加する必要があることが分かる

ポイント：assertNever パターンは、Union型に新しいメンバーを追加した際に、対応する処理の追加漏れをコンパイルエラーで通知してくれます。大規模なコードベースでは特に効果的なパターンです。

type ShapeKind = Shape["kind"];

const shapeLabels = {
  circle: "円",
  rectangle: "長方形",
  triangle: "三角形",
} satisfies Record<ShapeKind, string>;

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

// 型ガード関数: 戻り値が "animal is Fish"
function isFish(animal: Fish | Bird): animal is Fish {
  return ("swim" in animal);
}

function move(animal: Fish | Bird) {
  if (isFish(animal)) {
    // animal: Fish（型ガードにより絞り込まれる）
    animal.swim();
  } else {
    // animal: Bird
    animal.fly();
  }
}

型ガード関数 vs 通常の boolean 関数

• function isFish(animal: Fish | Bird): boolean → 戻り値が boolean だけ。呼び出し側で型の絞り込みは起こらない
• function isFish(animal: Fish | Bird): animal is Fish → 型述語付き。呼び出し側で型の絞り込みが起こる

interface User {
  id: number;
  name: string;
  email: string;
}

// unknown から User 型かどうかを判定する型ガード
function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value &&
    "email" in value &&
    typeof (value as User).id === "number" &&
    typeof (value as User).name === "string" &&
    typeof (value as User).email === "string"
  );
}

// APIレスポンスのバリデーションに活用
async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  const data: unknown = await response.json();

  if (isUser(data)) {
    // data: User（安全に使える）
    return data;
  }
  throw new Error("Invalid user data");
}

function isNotNull<T>(value: T | null): value is T {
  return value !== null;
}

function isDefined<T>(value: T | undefined): value is T {
  return value !== undefined;
}

const mixedArray: (string | null)[] = ["hello", null, "world", null];

// 型ガード関数なし: (string | null)[]
const withoutGuard = mixedArray.filter(item => item !== null);

// 型ガード関数あり: string[]
const withGuard = mixedArray.filter(isNotNull);
// withGuard: string[] ← 正しく絞り込まれる！

注意：ユーザー定義型ガードでは、TypeScriptは関数内部の実装が正しいかどうかを検証しません。例えば return true と書いてもコンパイルエラーにはなりません。型ガード関数の実装は開発者の責任で正しく書く必要があります。

class Shape {
  isCircle(): this is Circle {
    return this instanceof Circle;
  }
  isRectangle(): this is Rectangle {
    return this instanceof Rectangle;
  }
}

class Circle extends Shape {
  constructor(public radius: number) { super(); }
}

class Rectangle extends Shape {
  constructor(public width: number, public height: number) { super(); }
}

function processShape(shape: Shape) {
  if (shape.isCircle()) {
    // shape: Circle
    console.log(shape.radius);
  }
}

function assert(condition: unknown, message?: string): asserts condition {
  if (!condition) {
    throw new Error(message ?? "Assertion failed");
  }
}

function processValue(value: string | null) {
  assert(value !== null, "Value must not be null");
  // ここ以降、value: string（null が除外される）
  console.log(value.toUpperCase());
}

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") {
    throw new TypeError(`Expected string, got ${typeof value}`);
  }
}

function assertIsError(value: unknown): asserts value is Error {
  if (!(value instanceof Error)) {
    throw new TypeError("Expected Error instance");
  }
}

// 使用例
function handleInput(input: unknown) {
  assertIsString(input);
  // input: string
  console.log(input.trim().toLowerCase());
}

interface User {
  name: string;
  address?: {
    city: string;
    zip?: string;
  };
}

function getCity(user: User): string | undefined {
  // Optional Chaining なし（冗長）
  // const city = user.address ? user.address.city : undefined;

  // Optional Chaining あり（簡潔）
  return user.address?.city;
}

// メソッド呼び出しにも使える
const length = user.address?.city?.length;
// length: number | undefined

// 配列のインデックスアクセスにも使える
const arr: number[] | undefined = undefined;
const first = arr?.[0]; // number | undefined

// 関数呼び出しにも使える
const callback: ((x: number) => number) | undefined = undefined;
const result = callback?.(42); // number | undefined

const count: number | null = 0;

// || は falsy なら右辺を返す（0 も falsy）
const a = count || 10; // 10（0 は falsy なので右辺）

// ?? は null/undefined のときだけ右辺を返す
const b = count ?? 10; // 0（0 は nullish ではないので左辺）

const empty: string | null = "";
const c = empty || "default"; // "default"
const d = empty ?? "default"; // ""（空文字は nullish ではない）

interface Config {
  database?: {
    host?: string;
    port?: number;
  };
}

function getDbHost(config: Config): string {
  return config.database?.host ?? "localhost";
  // 戻り値型: string（undefined の可能性が ?? で解消される）
}

function getDbPort(config: Config): number {
  return config.database?.port ?? 5432;
}

type Color = "red" | "green" | "blue";
type ColorMap = Record<Color, string | number[]>;

// 型注釈を使った場合
const colorsAnnotated: ColorMap = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff",
};
// colorsAnnotated.red の型: string | number[]
// リテラル型の情報が失われる

// satisfies を使った場合
const colorsSatisfies = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff",
} satisfies ColorMap;
// colorsSatisfies.red の型: string ← 具体的な型が保持される
// colorsSatisfies.green の型: number[] ← 具体的な型が保持される

// satisfies の方が型の絞り込みが効く
colorsSatisfies.red.toUpperCase(); // OK: string と分かっている
colorsSatisfies.green.map(n => n * 2); // OK: number[] と分かっている

type Route = {
  path: string;
  method: "GET" | "POST" | "PUT" | "DELETE";
};

const routes = {
  home:    { path: "/",         method: "GET" },
  users:   { path: "/users",    method: "GET" },
  addUser: { path: "/users",    method: "POST" },
} as const satisfies Record<string, Route>;

// routes.home.method の型: "GET"（リテラル型が保持される）
// routes.addUser.method の型: "POST"（リテラル型が保持される）

ポイント：satisfies は「型の検証 + 推論型の保持」を両立させる演算子です。型注釈（: Type）を使うと具体的な型情報が失われてしまう場面で、satisfies を使えば型の絞り込みがそのまま活きます。

let value: string | null = "hello";

if (value !== null) {
  // value: string（ここでは絞り込まれている）

  setTimeout(() => {
    // value: string | null（絞り込みが失われている！）
    // TypeScriptは「コールバック実行時に value が変更されているかもしれない」と判断
    console.log(value.toUpperCase()); // エラー！
  }, 1000);
}

let value: string | null = "hello";

if (value !== null) {
  // 方法1: const 変数にコピー
  const narrowed = value; // narrowed: string

  setTimeout(() => {
    // narrowed: string（const なので変更されない保証がある）
    console.log(narrowed.toUpperCase()); // OK
  }, 1000);
}

function example() {
  let name: string | undefined;

  // 何らかの条件で name を設定
  name = "TypeScript";

  // 別のクロージャが name を変更する可能性がある
  const reset = () => { name = undefined; };

  // TypeScript は name が undefined に戻る可能性を考慮
  // name: string | undefined

  // 回避策: 再度チェックする
  if (name !== undefined) {
    console.log(name.toUpperCase()); // OK
  }
}

interface Config {
  name: string | null;
}

function processConfig(config: Config) {
  if (config.name !== null) {
    // config.name: string（直接アクセスではOK）
    console.log(config.name.toUpperCase()); // OK
  }
}

// 回避策: 変数に取り出して使う
function processConfigSafe(config: Config) {
  const { name } = config;
  if (name !== null) {
    // name: string
    console.log(name.toUpperCase()); // OK
  }
}

let globalValue: string | null = "hello";

async function process() {
  if (globalValue !== null) {
    // globalValue: string
    console.log(globalValue.toUpperCase()); // OK

    await someAsyncOperation();

    // await 後: globalValue: string | null に戻る可能性
    // （他のコードが await 中に globalValue を変更しうるため）
  }
}

// 回避策: ローカル変数にコピー
async function processSafe() {
  const localValue = globalValue;
  if (localValue !== null) {
    await someAsyncOperation();
    console.log(localValue.toUpperCase()); // OK（const なので安全）
  }
}

制御フロー解析の限界まとめ

• let 変数がコールバック/クロージャで参照される場合 → const にコピーする
• await の前後でグローバル変数の絞り込みがリセット → ローカル変数にコピーする
• TypeScriptが認識しない独自の判定ロジック → ユーザー定義型ガード（is）を使う
• 複雑なオブジェクトの入れ子プロパティ → 分割代入で取り出してからチェックする

// APIレスポンス型の定義
type ApiResult<T> =
  | { ok: true; data: T }
  | { ok: false; error: { code: number; message: string } };

// レスポンスのバリデーション型ガード
function isApiResult<T>(
  value: unknown,
  validateData: (data: unknown) => data is T
): value is ApiResult<T> {
  if (typeof value !== "object" || value === null) return false;
  if (!("ok" in value)) return false;

  const obj = value as Record<string, unknown>;
  if (obj.ok === true) {
    return "data" in obj && validateData(obj.data);
  }
  return obj.ok === false && "error" in obj;
}

// 使用例
async function fetchUsers() {
  const response = await fetch("/api/users");
  const result: ApiResult<User[]> = await response.json();

  if (result.ok) {
    // result.data: User[]
    return result.data;
  } else {
    // result.error: { code: number; message: string }
    throw new Error(`API Error ${result.error.code}: ${result.error.message}`);
  }
}

// catch の error は unknown 型
function getErrorMessage(error: unknown): string {
  // 1. Error インスタンスかチェック
  if (error instanceof Error) {
    return error.message;
  }
  // 2. 文字列かチェック
  if (typeof error === "string") {
    return error;
  }
  // 3. message プロパティを持つオブジェクトかチェック
  if (
    typeof error === "object" &&
    error !== null &&
    "message" in error &&
    typeof (error as Record<string, unknown>).message === "string"
  ) {
    return (error as { message: string }).message;
  }
  // 4. それ以外は文字列化
  return String(error);
}

// 使い方
try {
  riskyOperation();
} catch (error) {
  console.error(getErrorMessage(error));
}

type ValidationResult<T> =
  | { valid: true; data: T }
  | { valid: false; errors: string[] };

interface ContactForm {
  name: string;
  email: string;
  message: string;
}

function validateContactForm(input: unknown): ValidationResult<ContactForm> {
  const errors: string[] = [];

  if (typeof input !== "object" || input === null) {
    return { valid: false, errors: ["Input must be an object"] };
  }

  const obj = input as Record<string, unknown>;

  if (typeof obj.name !== "string" || obj.name.trim() === "") {
    errors.push("Name is required");
  }
  if (typeof obj.email !== "string" || !obj.email.includes("@")) {
    errors.push("Valid email is required");
  }
  if (typeof obj.message !== "string" || obj.message.length < 10) {
    errors.push("Message must be at least 10 characters");
  }

  if (errors.length > 0) {
    return { valid: false, errors };
  }

  return {
    valid: true,
    data: {
      name: obj.name as string,
      email: obj.email as string,
      message: obj.message as string,
    },
  };
}

// 使い方
const result = validateContactForm(formData);
if (result.valid) {
  // result.data: ContactForm（安全に使える）
  sendEmail(result.data);
} else {
  // result.errors: string[]
  showErrors(result.errors);
}

type AuthState =
  | { status: "unauthenticated" }
  | { status: "authenticating"; email: string }
  | { status: "authenticated"; user: User; token: string }
  | { status: "error"; message: string };

function renderAuthUI(state: AuthState): string {
  switch (state.status) {
    case "unauthenticated":
      return "Please log in";
    case "authenticating":
      return `Logging in as ${state.email}...`;
    case "authenticated":
      return `Welcome, ${state.user.name}!`;
    case "error":
      return `Login failed: ${state.message}`;
    default:
      return assertNever(state);
  }
}

判定したい型は？
  |
  +-- プリミティブ型 (string, number, boolean 等)
  |     → typeof を使う
  |
  +-- null / undefined
  |     +-- 0 や "" も falsy として除外して OK?
  |     |     +-- Yes → if (value) (Truthiness)
  |     |     +-- No  → !== null / != null
  |
  +-- クラスのインスタンス
  |     → instanceof を使う
  |
  +-- オブジェクト型 (interface / type)
        +-- 判別プロパティ (kind/type/status) がある?
        |     +-- Yes → Discriminated Union + switch
        |     +-- No  → in 演算子 or ユーザー定義型ガード (is)
        |
        +-- 外部データのバリデーション?
              → ユーザー定義型ガード (is)

const arr = [1, 2, 3];
const first = arr.find(x => x > 0);
// first: number | undefined

// NG: Object is possibly 'undefined'
// console.log(first.toFixed(2));

// OK: 方法1 - if チェック
if (first !== undefined) {
  console.log(first.toFixed(2));
}

// OK: 方法2 - Optional Chaining
console.log(first?.toFixed(2));

// OK: 方法3 - Nullish Coalescing でデフォルト値
const safeFirst = first ?? 0;
console.log(safeFirst.toFixed(2));

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

function process(shape: Shape) {
  // NG: Property 'radius' does not exist on type 'Shape'
  // console.log(shape.radius);

  // OK: 絞り込んでからアクセス
  if (shape.kind === "circle") {
    console.log(shape.radius); // OK
  }
}

// このエラーが出る場合 = switch の網羅性が不足している
// → Union 型に新しいメンバーが追加されたが、case が足りない

// 解決策: 不足している case を追加する
type Status = "active" | "inactive" | "pending"; // "pending" が新しく追加された

function getLabel(status: Status): string {
  switch (status) {
    case "active":
      return "有効";
    case "inactive":
      return "無効";
    case "pending": // ← これを追加
      return "保留中";
    default:
      return assertNever(status);
  }
}

// NG: 戻り値型が boolean のままだと絞り込みが効かない
function isStringWrong(value: unknown): boolean {
  return typeof value === "string";
}

// OK: 型述語を使う
function isStringCorrect(value: unknown): value is string {
  return typeof value === "string";
}

function example(value: unknown) {
  if (isStringWrong(value)) {
    // value: unknown（絞り込まれない！）
  }
  if (isStringCorrect(value)) {
    // value: string（正しく絞り込まれる）
  }
}

TypeScript シリーズ記事

• 【TypeScript】型の書き方 完全入門｜基本型・Union・Generics・型ガードまで ― 型システム全体を基本から学べる入門記事
• 【TypeScript】関数の型定義 完全ガイド｜引数・戻り値・オーバーロード・ジェネリクス関数まで ― 関数に特化した型定義を体系的に解説
• 【TypeScript】クラスの型定義 完全ガイド｜アクセス修飾子・抽象クラス・インターフェース実装まで ― クラスの型定義を体系的に解説
• 【TypeScript】ジェネリクス（Generics）完全ガイド｜基礎から実務パターンまで ― ジェネリクスを基礎から実務レベルまで徹底解説
• 【TypeScript】よくあるエラーと解決方法 完全ガイド ― エラーコード別の原因と対処法を網羅
• 【TypeScript】tsconfig.json 完全ガイド ― コンパイラ設定を体系的に解説
• 【TypeScript × React】型定義 完全ガイド ― ReactでのTypeScript活用法を解説
• 【TypeScript】ユーティリティ型 完全ガイド ― Partial・Pick・Omit・Record等を徹底解説