【TypeScript】ユニオン型とインターセクション型

TypeScriptを使いこなす上で、「ユニオン型」と「インターセクション型」は欠かせない概念です。これらを理解することで、型の柔軟性を保ちながらコードの安全性を高めることができます。

本記事では、それぞれの特徴と使い方を解説します。

ユニオン型

ユニオン型とは

ユニオン型は、複数の型のいずれかになる可能性を持つ型を表します。
例えば、文字列型または数値型を受け取る関数では、ユニオン型を利用することで柔軟性を持たせることができます。

ユニオン型は 「|」（パイプ）記号を使用して、複数の型を組み合わせます。

ユニオン型の使用例

以下の関数 printValue は、引数として文字列型または数値型を受け取ることができます。

function printValue(value: string | number): void {
  if (typeof value === 'string') {
    console.log(`文字列: ${value}`);
  } else {
    console.log(`数値: ${value}`);
  }
}

printValue("Hello"); // 文字列: Hello
printValue(123);     // 数値: 123

インターセクション型（交差型）

インターセクション型とは

インターセクション型（交差型とも呼ばれる）は、複数の型のすべての特性（プロパティとメソッド）を持つ型を表します。これはオブジェクトのプロパティを統合したり、型の拡張を行う際に便利です。

インターセクション型は 「&」記号を使用して、複数の型を組み合わせます。

インターセクション型の使用例

以下の型エイリアス Staff は、PersonインターフェイスとEmployeeインターフェイスのすべての特性を持ちます。

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type Staff = Person & Employee;

const staffMember: Staff = {
  name: "John",
  employeeId: 1001,
};

console.log(`名前: ${staffMember.name}, ID: ${staffMember.employeeId}`);

ユニオン型とインターセクション型の組み合わせ

ユニオン型とインターセクション型を組み合わせることで、より複雑な型を表現できます。

type TypeD = (TypeA | TypeB) & { address: string };

「TypeA | TypeB」の個所はユニオン型で、TypeAまたはTypeBのいずれかの型を受け入れることを意味します。
丸カッコでまとめられているため、こちらの演算が優先されます。

「{ address: string }」は、オブジェクト型でaddressプロパティを必須とし、その値が文字列であることを定義しています。

よって、「(TypeA | TypeB) & { address: string }」は、ユニオン型のいずれかの型と必須プロパティaddressを持つ型を結合したインターセクション型を表しています。

ユニオン型とインターセクション型の違い

ユニオン型は「AまたはB」のような和集合を表し、インターセクション型は「AかつB」のような積集合を表します。使用場面や型の組み合わせ方が異なります。

まとめ

ユニオン型とインターセクション型を理解し使いこなすことで、コードの柔軟性と型安全性を両立させることが可能です。
それぞれの特性を意識しながら適切に使い分けることで、より読みやすくメンテナンス性の高いコードを書くことができるようになります。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

最後までお読みいただき、ありがとうございました。