ユニオン型

2週間 ago

user

1 minute

ユニオン型は、複数の型のいずれかを受け入れたいときに使います。|（パイプ）を使って型を並べることで、「このどれかの型であればOK」という柔軟な型定義ができます。

📋 ユニオン型の構文と例

概要	使用例	説明
文字列 or 数値	`const id: string \| number = "abc";`	idが`string`か`number`ならOK
リテラル型列挙	`type Status = "success" \| "error";`	`"success"` または `"error"` のみ許容
型エイリアスと併用	`type Input = number \| boolean;`	複数の基本型をまとめて型定義
関数引数に使用	`function log(value: string \| number)`	string か number を受け取れる関数

🧪 使用例

type Status = "loading" | "success" | "error";

function showStatus(status: Status): void {
  console.log(`Status: ${status}`);
}

const currentStatus: Status = "success"; // ✅ OK
// const invalidStatus: Status = "fail"; // ❌ コンパイルエラー

function format(value: string | number): string {
  return value.toString(); // 両方に toString() があるので安全
}

💡 型の絞り込み（Type Narrowing）と相性が良い

function handle(input: string | number): void {
  if (typeof input === "string") {
    console.log(input.toUpperCase());
  } else {
    console.log(input.toFixed(2));
  }
}

ユニオン型と typeof を使って型を絞るパターンは頻出
in や instanceof とも併用可能

✅ まとめ

A | B の形式で「どちらかの型」を指定できる
入力の柔軟性を高めながら型安全を保つことが可能
typeof, in, instanceof と組み合わせて使うのが基本

type ClickEvent = MouseEvent | TouchEvent;

ユニオン型は「柔軟さ」と「安全さ」のバランスを取るための基本機能です。