【初心者向け】TypeScriptでenumを操る！intをenum文字列に変換する3つのテクニック

2024-06-25

TypeScriptでintをenum文字列にキャストする方法

TypeScriptでは、列挙型（enum）を使用して、一連の定数を定義できます。これらの定数は、文字列または数値として表すことができます。場合によっては、整数をenum文字列にキャストする必要がある場合があります。この記事では、TypeScriptでintをenum文字列にキャストする方法について、いくつかの方法をご紹介します。

方法1: as キーワードを使用する

最もシンプルで簡単な方法は、as キーワードを使用することです。これは、型アサーションと呼ばれる構文で、コンパイラに特定の型を割り当てるように指示します。

enum Color {
  Red,
  Green,
  Blue
}

let colorNum: number = 1; // Green を表す数値 1

let colorString: Color = colorNum as Color; // 'Green' になる

console.log(colorString); // 'Green' と出力

別の方法は、enumName[index] 構文を使用することです。これは、列挙型の定数にアクセスするために使用できるインデクサープロパティです。

enum Color {
  Red,
  Green,
  Blue
}

let colorNum: number = 1; // Green を表す数値 1

let colorString: Color = Color[colorNum]; // 'Green' になる

console.log(colorString); // 'Green' と出力

より汎用的な方法は、Object.keys() と Object.values() 関数を使用することです。これらの関数は、列挙型の定数の名前と値の配列を取得するために使用できます。

enum Color {
  Red,
  Green,
  Blue
}

let colorNum: number = 1; // Green を表す数値 1

let colorString: string = Object.values(Color)[colorNum]; // 'Green' になる

console.log(colorString); // 'Green' と出力

注意点

上記のいずれの方法を使用する場合でも、colorNum 変数が実際に有効な列挙型定数を表していることを確認する必要があります。そうでない場合は、ランタイムエラーが発生する可能性があります。

TypeScriptでintをenum文字列にキャストするには、いくつかの方法があります。最も適切な方法は、特定の状況によって異なります。上記の例を参考に、自分に合った方法を選択してください。

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

let colorNum: number = 1; // Green を表す数値 1

// 方法 1: `as` キーワードを使用する
let colorString1: Color = colorNum as Color;
console.log(colorString1); // 'Green' と出力

// 方法 2: `enumName[index]` を使用する
let colorString2: Color = Color[colorNum];
console.log(colorString2); // 'Green' と出力

// 方法 3: `Object.keys()` と `Object.values()` を使用する
let colorString3: string = Object.values(Color)[colorNum];
console.log(colorString3); // 'Green' と出力

このコードでは、Color という名前の列挙型を定義しています。この列挙型には、Red、Green、Blue という3つの定数が含まれています。

colorNum 変数には、Green を表す数値 1 が格納されています。

上記の3つの方法を使用して、colorNum 変数の値を colorString 変数にキャストします。colorString 変数は Color 型なので、コンパイラは colorString 変数が Color 列挙型の有効な値のみを保持することを確認します。

各方法で colorString 変数の値を出力すると、いずれも "Green" と表示されます。

このサンプルコードは、それぞれの方法がどのように機能するかを理解するのに役立ちます。

TypeScriptでintをenum文字列にキャストするその他の方法

switch式を使用する

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

let colorNum: number = 1; // Green を表す数値 1

let colorString: Color;

switch (colorNum) {
  case 0:
    colorString = Color.Red;
    break;
  case 1:
    colorString = Color.Green;
    break;
  case 2:
    colorString = Color.Blue;
    break;
  default:
    colorString = Color.Red; // デフォルト値を設定
}

console.log(colorString); // 'Green' と出力

この方法は、switch 式を使用して、colorNum 変数の値に基づいて colorString 変数に適切なenum値を割り当てます。

関数を使用する

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

let colorNum: number = 1; // Green を表す数値 1

function getColorString(colorNum: number): Color {
  switch (colorNum) {
    case 0:
      return Color.Red;
    case 1:
      return Color.Green;
    case 2:
      return Color.Blue;
    default:
      return Color.Red; // デフォルト値を返す
  }
}

let colorString: Color = getColorString(colorNum);

console.log(colorString); // 'Green' と出力