オブジェクトリテラルで列挙型風型を作る

2024-04-15

TypeScriptで列挙型のような型を作成する方法

しかし、場合によっては、列挙型のような型を作成したい場合があります。これは、列挙型のすべての機能が必要ではない場合や、より柔軟な型が必要な場合に役立ちます。

TypeScriptで列挙型のような型を作成するには、いくつかの方法があります。

オブジェクトリテラルを使用する

最も簡単な方法は、オブジェクトリテラルを使用することです。オブジェクトリテラルは、キーと値のペアのリストで構成されます。この場合、キーは定数名、値は定数値となります。

const Color = {
  Red: 0,
  Green: 1,
  Blue: 2,
};

const color: Color = Color.Red;

このコードは、Colorという名前のオブジェクトリテラルを定義します。このオブジェクトリテラルには、Red、Green、Blueという3つのキーがあります。これらのキーには、それぞれ0、1、2という値が割り当てられています。

colorという変数は、Color型の変数として宣言されています。これは、color変数に、Colorオブジェクトリテラルのいずれかの値のみを代入できることを意味します。

型エイリアスを使用する

より柔軟な方法として、型エイリアスを使用することができます。型エイリアスは、既存の型に新しい名前を与えるために使用されます。この場合、既存の型は、オブジェクトリテラル型となります。

type Color = {
  Red: 0,
  Green: 1,
  Blue: 2,
};

const color: Color = Color.Red;

このコードは、Colorという名前の型エイリアスを定義します。この型エイリアスは、オブジェクトリテラル型を指します。

ユニオン型を使用する

最も強力な方法は、ユニオン型を使用することです。ユニオン型は、複数の型のいずれかを表すために使用されます。この場合、複数の型は、文字列型と数値型となります。

type Color = "Red" | "Green" | "Blue";

const color: Color = "Red";

このコードは、Colorという名前のユニオン型を定義します。このユニオン型は、文字列型Red、Green、Blueのいずれかを表します。

オブジェクトリテラルは、最も簡単ですが、最も柔軟ではありません。
型エイリアスは、オブジェクトリテラルよりも柔軟ですが、ユニオン型ほど強力ではありません。
ユニオン型は、最も強力ですが、最も複雑です。

その他の考慮事項

列挙型は、コンパイラによる型チェックに役立ちます。オブジェクトリテラル、型エイリアス、ユニオン型は、コンパイラによる型チェックが制限される場合があります。
列挙型は、コードをより読みやすく、保守しやすくすることができます。オブジェクトリテラル、型エイリアス、ユニオン型は、コードが冗長になる可能性があります。

TypeScriptで列挙型のような型を作成するサンプルコード

オブジェクトリテラルを使用する

// Colorという名前のオブジェクトリテラルを定義します
const Color = {
  Red: 0,
  Green: 1,
  Blue: 2,
};

// colorという変数をColor型の変数として宣言します
const color: Color = Color.Red;

console.log(color); // Red

コンソールにcolor変数の値を出力すると、Redと出力されます。

型エイリアスを使用する

// Colorという名前の型エイリアスを定義します
type Color = {
  Red: 0,
  Green: 1,
  Blue: 2,
};

// colorという変数をColor型の変数として宣言します
const color: Color = Color.Red;

console.log(color); // Red

ユニオン型を使用する

// Colorという名前のユニオン型を定義します
type Color = "Red" | "Green" | "Blue";

// colorという変数をColor型の変数として宣言します
const color: Color = "Red";

console.log(color); // Red

これらの例は、TypeScriptで列挙型のような型を作成する基本的な方法を示しています。より複雑な型を作成するには、これらの方法を組み合わせて使用することができます。

TypeScriptで列挙型のような型を作成するその他の方法

Discriminated unionは、ユニオン型の特殊な形式で、各メンバーに異なるプロパティを持つオブジェクト型を定義することができます。これは、列挙型の値に関連付けられた追加データを格納する必要がある場合に役立ちます。

type Color = {
  type: "red";
} | {
  type: "green";
} | {
  type: "blue";
};

function getColorName(color: Color): string {
  switch (color.type) {
    case "red":
      return "Red";
    case "green":
      return "Green";
    case "blue":
      return "Blue";
    default:
      return "Unknown color";
  }
}

const color: Color = { type: "red" };
const colorName = getColorName(color);
console.log(colorName); // Red

この例では、Color型は、typeプロパティを持つオブジェクトの3つの discriminated union です。getColorName関数は、colorオブジェクトのtypeプロパティに基づいて、色の名前を返します。

Readonly modifierは、オブジェクトのプロパティを書き込み不可能にするために使用できます。これは、列挙型の値が変更されないようにする必要がある場合に役立ちます。

type Color = readonly {
  Red: 0,
  Green: 1,
  Blue: 2,
};

const color: Color = Color.Red;
color.Red = 10; // エラー: 'Red' は書き込み不可能です

この例では、Color型は、Red、Green、Blueというプロパティを持つreadonlyオブジェクトです。color変数はColor型の変数として宣言されていますが、color.Redプロパティに値を代入しようとするとエラーが発生します。

symbolを使用する

Symbolは、ユニークな識別子を生成するために使用できます。これは、列挙型の値に関連付けられた一意の値を格納する必要がある場合に役立ちます。

const Red = Symbol("Red");
const Green = Symbol("Green");
const Blue = Symbol("Blue");

type Color = typeof Red | typeof Green | typeof Blue;

const color: Color = Red;
console.log(color === Red); // true

この例では、Red、Green、Blueという3つのシンボルが定義されています。Color型は、これらのシンボルのいずれかの型です。color変数はColor型の変数として宣言され、Redシンボルに代入されます。コンソールにcolor変数の値を出力すると、trueと出力されます。

上記で紹介した方法は、ほんの一例です。より複雑な型を作成するには、これらの方法を組み合わせて使用することができます。

enums typescript