TypeScript で列挙型を比較する 4 つの方法とそれぞれの落とし穴

2024-06-20

TypeScript で列挙型（Enum）を比較する方法

厳格な等価比較 (===)

最も基本的な方法は、厳格な等価比較演算子 === を使用することです。これは、2 つの列挙型メンバーが同じ値と型を持つかどうかを比較します。

enum Color { Red, Green, Blue }

const color1 = Color.Red;
const color2 = Color.Red;

console.log(color1 === color2); // true

この方法はシンプルで分かりやすいですが、列挙型のメンバーが異なる型の場合は機能しません。

値の比較

列挙型のメンバーの値のみを比較したい場合は、値の比較を行うことができます。これには、= 演算子を使用できます。

enum Color { Red = 0, Green = 1, Blue = 2 }

const color1 = Color.Red;
const color2 = 0;

console.log(color1 == color2); // true

この方法は、列挙型のメンバーが異なる型であっても機能します。ただし、厳格な等価比較ほど型安全ではありません。

列挙型ガードを使用して、列挙型のメンバーを比較することもできます。これは、より型安全な方法ですが、少し冗長になる可能性があります。

enum Color { Red, Green, Blue }

function isColor(color: any): color is Color {
  return typeof color === 'number' && Color[color] !== undefined;
}

const color1 = Color.Red;
const color2 = 0;

if (isColor(color1) && isColor(color2) && color1 === color2) {
  console.log('Colors are equal');
} else {
  console.log('Colors are not equal');
}

スイッチ式

列挙型のメンバーを比較するもう 1 つの方法は、スイッチ式を使用することです。これは、より冗長な方法ですが、可読性が高くなる可能性があります。

enum Color { Red, Green, Blue }

const color1 = Color.Red;
const color2 = Color.Red;

switch (color1) {
  case Color.Red:
    if (color2 === Color.Red) {
      console.log('Colors are equal');
    } else {
      console.log('Colors are not equal');
    }
    break;
  case Color.Green:
    // ...
  case Color.Blue:
    // ...
}

TypeScript で列挙型を比較するには、さまざまな方法があります。それぞれの方法には長所と短所があり、状況によって最適な方法が異なります。

シンプルで分かりやすい方法が必要な場合は、厳格な等価比較 (===) を使用します。
列挙型のメンバーの値のみを比較したい場合は、値の比較 (=) を使用します。
より型安全な方法が必要な場合は、列挙型ガードを使用します。
可読性が高い方法が必要な場合は、スイッチ式を使用します。

どの方法を選択する場合でも、コードが明確で簡潔であることを確認してください。

TypeScript で列挙型を比較するサンプルコード

例 1: 厳格な等価比較

enum Color { Red, Green, Blue }

const color1 = Color.Red;
const color2 = Color.Red;

console.log(color1 === color2); // true

例 2: 値の比較

enum Color { Red = 0, Green = 1, Blue = 2 }

const color1 = Color.Red;
const color2 = 0;

console.log(color1 == color2); // true

例 3: 列挙型ガード

enum Color { Red, Green, Blue }

function isColor(color: any): color is Color {
  return typeof color === 'number' && Color[color] !== undefined;
}

const color1 = Color.Red;
const color2 = 0;

if (isColor(color1) && isColor(color2) && color1 === color2) {
  console.log('Colors are equal');
} else {
  console.log('Colors are not equal');
}

例 4: スイッチ式

enum Color { Red, Green, Blue }

const color1 = Color.Red;
const color2 = Color.Red;

switch (color1) {
  case Color.Red:
    if (color2 === Color.Red) {
      console.log('Colors are equal');
    } else {
      console.log('Colors are not equal');
    }
    break;
  case Color.Green:
    // ...
  case Color.Blue:
    // ...
}

これらの例は、TypeScript で列挙型を比較するさまざまな方法を示すほんの一例です。状況に応じて最適な方法を選択することが重要です。

TypeScript で列挙型を比較するその他の方法

オブジェクトの比較

列挙型を文字列または数値のオブジェクトとして表すこともできます。この場合、標準の JavaScript オブジェクト比較方法を使用して、2 つの列挙型を比較できます。

enum Color { Red = 0, Green = 1, Blue = 2 }

const color1 = Color.Red;
const color2 = { Red: 0 };

console.log(JSON.stringify(color1) === JSON.stringify(color2)); // true

カスタム比較関数

独自の比較ロジックが必要な場合は、カスタム比較関数を作成できます。これにより、列挙型のメンバーを比較する方法を完全に制御できます。

enum Color { Red, Green, Blue }

function compareColors(color1: Color, color2: Color): boolean {
  if (color1 === color2) {
    return true;
  }

  switch (color1) {
    case Color.Red:
      return color2 === Color.Red || color2 === Color.Orange;
    case Color.Green:
      return color2 === Color.Green || color2 === Color.Lime;
    case Color.Blue:
      return color2 === Color.Blue || color2 === Color.Navy;
    default:
      return false;
  }
}

const color1 = Color.Red;
const color2 = Color.Orange;

console.log(compareColors(color1, color2)); // true