A | B ユニオン型

最終更新：2026-10-22

ユニオン型 A | B は「値が A または B のいずれかである」ことを表します。ユニオンの値を使う前には必ず先にナローイング（typeof、in など）を行い、コンパイラに今どちらを扱っているか知らせる必要があります。

ℹ️ 説明 エディタは TypeScript を JavaScript にトランスパイルして実行します（型チェックなし）。型チェック結果は各サンプルの出力を参照してください。

📝 構文

type Id = string | number;
let id: Id = "u1";
id = 42; // どちらも合法

if (typeof id === "number") {
  id.toFixed(0); // メンバーアクセスにはナローイングが必要
}

A \| B	縦棒でメンバーの型を区切ります。メンバー数は制限されず、重複したメンバーは自動的にマージされます

戻り値：戻り値はありません。ユニオン型は純粋な型レベルの概念であり、コンパイル後に消えます。

下のコードを編集して「試す」を押すと、トランスパイル実行結果を確認できます：

出力：

ABC 3.14

（トランスパイル後の実行出力。if 内で絞り込まずに value.toUpperCase() を直接呼ぶとコンパイルエラーになります）

ℹ️ 説明 絞り込まれていないユニオンの値は、すべてのメンバーが共通して持つプロパティ/メソッドにしかアクセスできません。コンパイラは今どれなのか確定できないからです。

💡 ヒント ナローイングの手段は場面に応じて選びます。typeof（プリミティブ値）、in（プロパティの存在）、instanceof（クラスインスタンス）、リテラルの等価比較（判別可能ユニオン）です。

⚠️ 注意 ユニオンの分岐が多すぎると、使用する場所すべてでナローイングを書くことになり、維持コストが高くなります。共通のタグフィールドを持つ分岐は、判別可能ユニオンへの変更を検討してください。

ケースは今後追加予定です。

Q なぜメソッドを呼ぶ前にナローイングが必要なのですか？

A string | number に対して toUpperCase を呼ぶと、実行時に number だった場合クラッシュするからです。コンパイラは「今は string である」ことの証明を要求し、ナローイングこそがその証明の過程です。

Q ユニオン型と any の違いは何ですか？

A ユニオンは「許可されたいくつかの可能性」を明示的に列挙し、範囲外を誤って使うと即エラーになります。any はすべてを許し、すべてのチェックを失います。ユニオンは「限られた選択肢」、any は「判断の放棄」です。

Q 判別可能ユニオン（discriminated union）とは何ですか？

A 各分岐が 1 つのリテラルフィールド（kind: "circle" | "rect" など）を持ち、そのフィールドを switch するだけでオブジェクト全体を 1 度に絞り込めます。詳細は discriminated-unions の項目を参照してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。