先生と生徒の会話形式で理解しよう

生徒

「TypeScriptで『|』や『&』って記号を見たんですが、どういう意味ですか？」

先生

「それはユニオン型と交差型というTypeScriptの型の仕組みを表す記号です。型の使い方の幅が広がりますよ。」

生徒

「それぞれどんな場面で使うんですか？使い分けが難しそうです……」

先生

「安心してください！今回は、ユニオン型と交差型の違いと使い方を、簡単な例でわかりやすく解説しますね。」

1. ユニオン型（|）とは？

ユニオン型は、複数の型のうち、どれかひとつを使えるようにする型です。記号は |（パイプ）を使います。

たとえば「文字列または数値のどちらかを受け取れる変数」を定義したいとき、ユニオン型が便利です。

以下は、ユニオン型を使った簡単なサンプルです。


let value: string | number;

value = "こんにちは"; // OK（string）
value = 42;           // OK（number）
// value = true;     // エラー（booleanは含まれていないため）

このように、stringかnumberのどちらかであれば代入できます。booleanなど、それ以外の型は使えません。

ユニオン型は、「この中のどれか一つならOK」という柔軟な型の指定方法です。

2. 交差型（&）とは？

交差型は、複数の型をすべて組み合わせた型です。記号は &（アンパサンド）を使います。

ユニオン型とは逆で、「すべての型の要素を持っている必要がある」という使い方になります。

具体的なサンプルを見てみましょう。


type Person = {
    name: string;
};

type Worker = {
    company: string;
};

type WorkingPerson = Person & Worker;

const employee: WorkingPerson = {
    name: "田中",
    company: "ABC株式会社"
};

この場合、WorkingPerson型はnameとcompanyの両方のプロパティを持っている必要があります。

交差型は、「複数の型の特徴をすべて併せ持った型を作りたい」ときに使います。

3. ユニオン型と交差型の違いを例で比較しよう

ここで、ユニオン型と交差型の違いを簡単に図式化してみましょう。

ユニオン型（|）：「A または B」どちらか片方
交差型（&）：「A かつ B」両方必要

たとえば、以下のコードを比べてみましょう。

ユニオン型の例


type Dog = {
    bark: () => void;
};

type Cat = {
    meow: () => void;
};

function speak(animal: Dog | Cat) {
    // animal.bark(); // エラー：どちらの型か分からないため
    // animal.meow(); // エラー
}

このようにユニオン型は「どちらか」なので、使うときにはどちらの型かを判断する必要があります（型ガードなどを使います）。

交差型の例


type Dog = {
    bark: () => void;
};

type Cat = {
    meow: () => void;
};

function speak(animal: Dog & Cat) {
    animal.bark(); // OK
    animal.meow(); // OK
}

交差型は「両方持っている」ので、どちらのメソッドも自由に使えます。

4. どちらを使うべきか？判断のポイント

ユニオン型と交差型、どちらを使うべきか迷ったら、以下のように考えるとよいでしょう。

ユニオン型：「いくつかの型のうち、どれか1つを許可したいとき」
交差型：「複数の型の性質をすべて併せ持たせたいとき」

たとえば、関数の引数が「文字列か数値どちらでもいい」といった場合はユニオン型。

逆に、PersonとWorker両方の情報が必要なデータを扱いたい場合は交差型を使います。

5. 実行結果を見てみよう（ユニオン型）

次のサンプルは、ユニオン型を使って値の型に応じて処理を分けています。


function printId(id: string | number) {
    if (typeof id === "string") {
        console.log("文字列ID：" + id.toUpperCase());
    } else {
        console.log("数値ID：" + id.toFixed(2));
    }
}

printId("abc123");
printId(456.78);

実行結果


文字列ID：ABC123
数値ID：456.78

6. 型の柔軟性を活かそう

ユニオン型（|）と交差型（&）は、TypeScriptの型システムの柔軟性を支える重要な要素です。

「どちらかひとつ」ならユニオン型、「どちらも必要」なら交差型。これを意識するだけで、適切な型設計ができるようになります。

TypeScriptの型は、ただの制限ではなく、バグの少ないコードを作るための助けになります。型を正しく使い分けて、安全でわかりやすいプログラムを目指しましょう！

まとめ

TypeScriptのユニオン型と交差型についてじっくり振り返ってみると、どちらも型の幅を広げてくれるとても重要な仕組みだと気付けます。特に、複数の型を扱いたいときや、異なる性質をまとめてひとつの型にしたいとき、ユニオン型と交差型のどちらを選ぶかでコードの読みやすさが大きく変わります。はじめは記号の見た目が似ているので混乱しやすいものの、実際にいくつか例を書きながら比べていくと、その違いが自然と理解できるようになります。また、これらの型は日常的なプログラムの中でも頻繁に登場するため、今の段階でしっかり使い分け方を押さえておくと、後の学習がかなり楽になります。

ユニオン型は「複数の選択肢からどれかひとつを受け取れる」という柔軟さがあり、幅広い場面で活用できます。たとえばユーザー入力のように「文字列のときもあれば数値の場合もある」といったケースでは非常に相性が良く、処理を型に合わせて分岐させることでエラーを防ぎつつ読みやすいコードを維持できます。一方で交差型は、「複数の型が持つ性質をすべて併せ持つ」という特徴があり、異なる情報をまとめて扱いたいとき、データ構造を整理したいときに大きな力を発揮します。名前と所属先をまとめた人の情報、複数の属性を同時に必要とする処理など、現実世界のデータに近い構造を表現するときに役立つため、覚えておくと非常に便利です。

型の設計は、TypeScriptを使う上で避けて通れない大切な工程です。適切な型を選ぶことで、意図しないデータが紛れ込むことを防ぎ、後から見返してもわかりやすいコードにつながります。特にユニオン型や交差型は、単純に型を指定するだけでは表現できない複雑な状態をうまく表せるため、プログラムの柔軟性を高めつつ安全性も確保できます。こうした基本的な型の扱いに慣れていくと、型ガード、型エイリアス、ジェネリクスといったより高度な仕組みも自然と理解しやすくなります。

ユニオン型と交差型を組み合わせたサンプル

以下は、ユニオン型と交差型を組み合わせて現実的な処理を行う例です。記事中で学んだ内容をさらに深めるイメージで参考にしてください。


type Admin = {
    role: "admin";
    manage: () => void;
};

type User = {
    role: "user";
    login: () => void;
};

type Guest = {
    role: "guest";
};

type AccessPerson = Admin | User | Guest;

type Profile = {
    name: string;
    age: number;
};

type Detail = Profile & {
    email: string;
};

function showInfo(person: AccessPerson) {
    if (person.role === "admin") {
        person.manage();
    } else if (person.role === "user") {
        person.login();
    } else {
        console.log("閲覧専用のゲストです");
    }
}

const detail: Detail = {
    name: "山田",
    age: 32,
    email: "test@example.com"
};

console.log(detail.name + "さん（" + detail.age + "歳）：" + detail.email);

こうした複合的な型の組み合わせは、TypeScriptの型が持つ表現力の高さを感じられる部分です。同時に、型を使うことで安全性が保たれているため、実行時のミスを大幅に減らせるという利点があります。最初は少し複雑に見えるかもしれませんが、実際に動かしながら経験を積んでいくと、ユニオン型と交差型の違いと利用場面がより深く理解できるはずです。

先生と生徒の振り返り会話

生徒

「ユニオン型と交差型って最初は似ていると思っていたけど、全然違う役割があって驚きました。特に、データを安全に扱えるところが便利ですね。」

先生

「そうなんだ。TypeScriptの型は、ただのルールではなく便利に使える道具なんだよ。ユニオン型と交差型はその中でも特に使いどころが多いから、しっかり理解しておくと役に立つよ。」

生徒

「サンプルプログラムも見てみると、たしかに現実のデータに近くてイメージしやすかったです。もっと色んな場面で試してみたいと思いました！」

先生

「その意欲が何より大事だよ。型をうまく使えるようになると、コード全体が見違えるように扱いやすくなるからね。」

生徒

「はい！これからもっとTypeScriptを触って、型の考え方を身につけていきます！」