TypeScriptのユニオン型とは？基本から実践まで解説！

TypeScriptを使っていると、「ある変数が複数の異なる型を持つ可能性がある」という場面に出くわすことがあります。

そのような場合に便利なのが ユニオン型（Union Type） です。

ユニオン型を活用すると、柔軟な型定義ができるだけでなく、コードの可読性や保守性も向上します。

この記事では、

「TypeScriptのユニオン型とは？基本から実践まで解説！」

と題して、TypeScriptのユニオン型について、基本的な概念から実践的な使い方まで詳しく解説します。

ユニオン型を理解し、活用できるようになれば、より安全で効率的なコードを書けるようになります。

ユニオン型とは？
ユニオン型の基本的な使い方
ユニオン型の応用
1. typeof を使った型ガード
2. in 演算子を使ったオブジェクト型の判定
まとめ

ユニオン型とは？

TypeScriptのユニオン型（Union Type）は、一つの変数に対して複数の型を許容できる型定義です。

|（パイプ）を使って定義します。

// ユニオン型の定義
let value: string | number;

ユニオン型を使うことで、柔軟な型定義が可能になります。

ユニオン型の基本的な使い方

変数の複数の型定義

ユニオン型は変数の型定義に使えます。

let value: string | number;
value = "Hello"; // OK
value = 100;     // OK
value = true;    // エラー（string でも number でもないため）

ゆーや

stringとnumberを許容するような変数が定義できます！
もちろん、それ以外（例でいうtrue）をいれると型チェックで落ちます！

ユニオン型×リテラル型を組み合わせる

ユニオン型×リテラル型を組み合わせることで、

ある選択肢の中からのみ値を定義することが可能な変数を作成できます！

let status: "success" | "error" | "pending";
status = "success"; // OK
status = "failed";  // エラー（指定されていない値）

ゆーや

例では、success, error, pendingのみを許容する変数が定義できました！

関数の型定義

もちろん、関数の型定義にも使用できます！

function formatId(id: string | number): string {
  return `ID: ${id}`;
}

console.log(formatId("abc123")); // OK
console.log(formatId(456));       // OK

ゆーや

わざわざ、型ごとに関数を用意しなくてもよくなるね！
ただ、可読性が落ちると判断される場合もあるので、各プロジェクトのコード規約を確認してね！

ユニオン型の応用

ユニオン型を扱う際には、型を判別する方法（型ガード）が重要です！

typeof を使った型ガード

typeof 演算子を使って型を判定できます。

function doubleValue(value: string | number): number {
  // 型がnuberの場合、
  if (typeof value === "number") {
    return value * 2;
  }
  return parseFloat(value) * 2;
}

console.log(doubleValue(10));     // 20
console.log(doubleValue("5.5")); // 11

in 演算子を使ったオブジェクト型の判定

オブジェクトのプロパティをチェックすることで、型を判別できます。

type Dog = { bark: string };
type Cat = { meow: string };

type Pet = Dog | Cat;

function describePet(pet: Pet): void {
  if ("bark" in pet) {
    console.log(`This pet barks: ${pet.bark}`);
  } else {
    console.log(`This pet meows: ${pet.meow}`);
  }
}