TypeScript で列挙型を拡張する方法

2024-06-13

TypeScript で列挙型を拡張する方法

同じ名前の列挙型を別々に定義する

最も単純な方法は、同じ名前の列挙型を別々に定義することです。後から定義された列挙型は、最初に定義された列挙型を拡張します。

enum Color {
  Red,
  Green,
  Blue
}

enum Color {
  Purple = 'purple',
  Pink = 'pink'
}

console.log(Color.Red); // Red
console.log(Color.Purple); // purple

この方法の利点は、シンプルで分かりやすいことです。ただし、複数の拡張列挙型があると、管理が煩雑になる可能性があります。

declare キーワードを使用する

より柔軟な拡張方法は、declare キーワードを使用する方法です。この方法では、既存の列挙型に新しいメンバーを直接追加できます。

enum Color {
  Red,
  Green,
  Blue
}

declare enum Color {
  Purple = 'purple',
  Pink = 'pink'
}

console.log(Color.Red); // Red
console.log(Color.Purple); // purple

この方法の利点は、既存の列挙型を変更せずに拡張できることです。また、declare キーワードを使用することで、型定義のみを追加することもできます。

補足

列挙型のメンバーは、数値または文字列のいずれでも定義できます。
列挙型のメンバーに初期値を指定することもできます。
列挙型は、他の型と同様に使用できます。

例

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

function getColorName(color: Color): string {
  switch (color) {
    case Color.Red:
      return 'Red';
    case Color.Green:
      return 'Green';
    case Color.Blue:
      return 'Blue';
    default:
      return 'Unknown';
  }
}

console.log(getColorName(Color.Red)); // Red
console.log(getColorName(Color.Blue)); // Blue

TypeScript で列挙型を拡張するサンプルコード

同じ名前の列挙型を別々に定義する

// ファイル1: color.ts
enum Color {
  Red,
  Green,
  Blue
}

// ファイル2: more-colors.ts
enum Color {
  Purple = 'purple',
  Pink = 'pink'
}

// ファイル3: usage.ts
import { Color } from './color';
import { Color as MoreColor } from './more-colors';

console.log(Color.Red); // Red
console.log(MoreColor.Purple); // purple

説明:

color.ts ファイルで Color という名前の列挙型を定義します。
more-colors.ts ファイルで、同じ名前の Color 列挙型を定義します。この列挙型は、purple と pink という新しいメンバーを追加します。
usage.ts ファイルで、color.ts と more-colors.ts から Color をインポートします。

この例では、more-colors.ts で定義された列挙型が color.ts で定義された列挙型を拡張します。つまり、Color 型には、Red、Green、Blueに加えて、Purple と Pink というメンバーも含まれます。

declare キーワードを使用する

// ファイル1: color.ts
enum Color {
  Red,
  Green,
  Blue
}

// ファイル2: more-colors.ts
declare enum Color {
  Purple = 'purple',
  Pink = 'pink'
}

// ファイル3: usage.ts
import { Color } from './color';

console.log(Color.Red); // Red
console.log(Color.Purple); // purple

この例では、declare キーワードを使用して、color.ts で定義された Color 列挙型に新しいメンバーを直接追加します。declare キーワードを使用すると、既存の列挙型を変更せずに拡張できます。

列挙型に初期値を指定する

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

function getColorName(color: Color): string {
  switch (color) {
    case Color.Red:
      return 'Red';
    case Color.Green:
      return 'Green';
    case Color.Blue:
      return 'Blue';
    default:
      return 'Unknown';
  }
}

console.log(getColorName(Color.Red)); // Red
console.log(getColorName(Color.Blue)); // Blue

これらの例は、TypeScript で列挙型を拡張する様々な方法を示すほんの一例です。列挙型は、定数の集合を定義する強力なツールであり、様々な状況で使用することができます。

TypeScript で列挙型を拡張するその他の方法

ユニオン型を使用して、既存の列挙型を新しいメンバーで拡張することができます。この方法は、declare キーワードを使用するよりも柔軟性がありますが、型安全性は低くなります。

enum Color {
  Red,
  Green,
  Blue
}

type ExtendedColor = Color | 'purple' | 'pink';

console.log((<ExtendedColor>'purple')); // purple

オブジェクトリテラルを使用して、列挙型のような構造を定義することもできます。この方法は、型安全性は低くなりますが、列挙型よりも柔軟性に優れています。

const Color = {
  Red: 0,
  Green: 1,
  Blue: 2,
  Purple: 'purple',
  Pink: 'pink'
};

console.log(Color.Red); // 0
console.log(Color.Purple); // purple

外部ライブラリを使用する

tsd や @types などの外部ライブラリを使用して、既存の列挙型を拡張することもできます。これらのライブラリは、型定義を拡張するための追加機能を提供します。

例:

// @types/my-lib をインストールする
npm install @types/my-lib

// my-lib.d.ts ファイルで列挙型を定義する
declare enum MyColor {
  Red,
  Green,
  Blue
}

// ファイル1: color.ts
import { MyColor } from 'my-lib';

enum Color {
  Purple = MyColor.Blue + 1,
  Pink = MyColor.Blue + 2
}

// ファイル2: usage.ts
import { Color } from './color';

console.log(Color.Purple); // 4
console.log(Color.Pink); // 5