TypeScriptのユニオン型と交差型の使い分け

先生

TypeScriptのユニオン型と交差型、使い分けに迷っていませんか？この記事でスッキリ解決！

TypeScriptのユニオン型とは？基本と使い方

TypeScriptのユニオン型は、複数の型を組み合わせた型です。これは、変数が複数の異なる型のいずれかになり得る状況を表現するのに役立ちます。例えば、数値または文字列を受け入れる関数を定義する場合などに使用します。

ユニオン型は、| (パイプ) 記号を使用して型を区切って定義します。

let value: number | string;
value = 10; // OK
value = 'Hello'; // OK
value = true; // エラー: boolean型は割り当てられない

上記の例では、value 変数は number 型または string 型のいずれかの値を保持できます。TypeScriptコンパイラは、value に許可されていない型を割り当てようとするとエラーを報告します。

ユニオン型は、関数の引数や戻り値の型としても使用できます。

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

上記の例では、printValue 関数は number または string 型の引数を受け取ります。関数内で typeof 演算子を使用して、引数の型をチェックし、それに応じて処理を分岐しています。

TypeScriptの交差型とは？基本と使い方

TypeScriptの交差型は、複数の型を組み合わせて、それらすべての型のプロパティを持つ新しい型を作成します。これは、複数のインターフェースまたは型を組み合わせた型を定義するのに役立ちます。例えば、複数の機能を実装するオブジェクトを表す場合などに使用します。

交差型は、& (アンパサンド) 記号を使用して型を区切って定義します。

interface Colorful {
  color: string;
}

interface Printable {
  print(): void;
}

type ColorfulPrintable = Colorful & Printable;

const obj: ColorfulPrintable = {
  color: 'red',
  print() {
    console.log('印刷:', this.color);
  }
};

上記の例では、ColorfulPrintable 型は Colorful インターフェースと Printable インターフェースの両方のプロパティを持つオブジェクトを表します。obj オブジェクトは、color プロパティと print メソッドの両方を実装する必要があります。

交差型は、既存の型を拡張するためにも使用できます。

type Person = {
  name: string;
};

type Employee = Person & {
  employeeId: number;
};

上記の例では、Employee 型は Person 型のすべてのプロパティに加えて、employeeId プロパティも持つようになります。

ユニオン型と交差型の使い分け：具体的な例

ユニオン型と交差型は、それぞれ異なる目的で使用されます。ユニオン型は、変数が複数の異なる型のいずれかになり得る場合に使用します。一方、交差型は、複数の型のすべてのプロパティを持つ新しい型を作成する場合に使用します。

例1：APIからのレスポンスを扱う場合

APIからのレスポンスは、成功した場合と失敗した場合で異なる構造を持つことがあります。このような場合、ユニオン型を使用してレスポンスの型を定義できます。

type SuccessResponse = {
  status: 'success';
  data: any;
};

type ErrorResponse = {
  status: 'error';
  message: string;
};

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('データ:', response.data);
  } else {
    console.error('エラー:', response.message);
  }
}

例2：設定オブジェクトを扱う場合

複数の設定オプションがあり、それらを組み合わせたい場合、交差型を使用できます。

interface DatabaseConfig {
  host: string;
  port: number;
}

interface SecurityConfig {
  sslEnabled: boolean;
  apiKey: string;
}

type AppConfig = DatabaseConfig & SecurityConfig;

const config: AppConfig = {
  host: 'localhost',
  port: 5432,
  sslEnabled: true,
  apiKey: 'YOUR_API_KEY'
};

参考リンク

まとめ

TypeScriptのユニオン型と交差型は、複雑な型を表現するための強力なツールです。ユニオン型は、変数が複数の型のいずれかになり得る場合に使用し、交差型は、複数の型のすべてのプロパティを持つ新しい型を作成する場合に使用します。これらの型を適切に使い分けることで、より安全で保守性の高いコードを書くことができます。