23. 判別可能ユニオン

判別可能ユニオンは、各メンバーに kind のような共通のリテラル型プロパティ(判別子)を持たせたユニオン型です。state.kind === "success" のように判別子を比較するだけで、そのメンバーの型に正確に絞り込まれます。

実務で最も活躍するのは「状態の表現」です。読み込み中・成功・失敗のように、状態ごとに持つデータが違う場面を1つの型で表せて、「成功のときだけ data がある」という関係を型が保証してくれます。

ポイントは、状態ごとに別の型として定義し、共通の判別子で束ねることです。boolean のフラグを複数持たせるより、あり得ない組み合わせを型レベルで排除できるこの形が安全です。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// kind プロパティが判別子になる
type FetchState =
  | { kind: "loading" }
  | { kind: "success"; data: string }
  | { kind: "error"; message: string };

function describeState(state: FetchState): string {
  if (state.kind === "success") {
    return "成功: " + state.data; // ここでは data が使える
  }
  if (state.kind === "error") {
    return "失敗: " + state.message;
  }
  return "読み込み中...";
}

console.log(describeState({ kind: "loading" }));
console.log(describeState({ kind: "success", data: "ユーザー一覧" }));
console.log(describeState({ kind: "error", message: "通信エラー" }));

公式ドキュメントで詳しく ↗