Zenn
Open3

TypeScript の enum (列挙型)について

JavaScript
TypeScript
enum
列挙型
型定義
まさぴょんまさぴょん

1. TypeScriptのenum(列挙型)とは？

enumは、関連する定数値を一つのグループとしてまとめるためのTypeScriptの機能です。
これにより、コードの可読性と保守性が向上します。

TypeScriptのenum(列挙型)の特徴

  • 定数の集合：関連する定数を一つの名前空間にまとめます。
  • 型安全：指定したenum以外の値を受け付けないため、型安全性が向上します。
  • 双方向マッピング（数値型のみ）：数値型enumでは、キーと値の両方からアクセスできます。

2. enumの種類

TypeScriptのenumは主に以下の2種類に分類されます。

2.1 数値型enum（Numeric Enum）

デフォルトのenumは数値型で、各メンバーには自動的に数値が割り当てられます。

enum Direction {
  North, // 0
  East,  // 1
  South, // 2
  West,  // 3
}

特徴

  • 自動割り当て：初期値を指定しない場合、0から始まる連番が割り当てられます。
  • 双方向マッピング：キーから値、値からキーへのアクセスが可能です。

2.2 文字列型enum（String Enum）

各メンバーに文字列リテラルを割り当てます。

enum PaymentStatus {
  Pending = "PENDING",
  Completed = "COMPLETED",
  Failed = "FAILED",
}

特徴

  • 明示的な値の指定：全てのメンバーに値を明示的に指定する必要があります。
  • 双方向マッピング不可：値からキーへのアクセスはできません。

3. enumの比較表

特徴 数値型enum 文字列型enum
値の型 数値 文字列
初期値の必要性 必要なし（自動割り当て） 必須（全メンバーに指定）
双方向マッピング 可能 不可能
使用用途 状態管理、ビットフラグ 定数文字列の集合
コンパイル後の出力 若干大きい 比較的大きい

4. 類似する用語との比較

4.1 Union Types（合併型）

Union Typesは、複数の型を組み合わせて一つの型として扱います。

type PaymentMethods = "CREDIT_CARD" | "APPLE_PAY" | "GOOGLE_PAY";

比較ポイント

  • 型安全性：Union Typesは型チェックが厳密です。
  • コード量：enumより軽量で、コンパイル後の出力も小さいです。
  • 可読性：enumの方が構造的で可読性が高い場合があります。

4.2 オブジェクトリテラル

定数オブジェクトとして定義します。

const PaymentTypes = {
  CREDIT_CARD: "CREDIT_CARD",
  APPLE_PAY: "APPLE_PAY",
  GOOGLE_PAY: "GOOGLE_PAY",
} as const;

type PaymentTypes = typeof PaymentTypes[keyof typeof PaymentTypes];

比較ポイント

  • 変更不可：as constで読み取り専用にできます。
  • 型推論：TypeScriptはリテラル型として推論します。
  • コンパイル後のサイズ：enumよりも小さいです。

5. enumの活用方法

enumをどのように活用するか、具体的な例を交えて解説します。

export enum PaymentTypes {
  CREDIT_CARD = "CREDIT_CARD",
  APPLE_PAY = "APPLE_PAY",
  GOOGLE_PAY = "GOOGLE_PAY",
}

5.1 型として使用

関数の引数や変数の型として使用できます。

function processPayment(method: PaymentTypes) {
  // 支払い処理の実装
}

const selectedMethod: PaymentTypes = PaymentTypes.APPLE_PAY;
processPayment(selectedMethod);

5.2 値の比較

enumのメンバーと比較して条件分岐が可能です。

if (selectedMethod === PaymentTypes.GOOGLE_PAY) {
  // Google Pay専用の処理
}

5.3 ループ処理

enumの全ての値を走査する場合、Object.valuesを使用します。

for (const method of Object.values(PaymentTypes)) {
  console.log(method);
  // 出力: "CREDIT_CARD", "APPLE_PAY", "GOOGLE_PAY"
}

5.4 Union Typeへの変換

enumの値をUnion Typeとして扱うことも可能です。

type PaymentTypeUnion = `${PaymentTypes}`;
// "CREDIT_CARD" | "APPLE_PAY" | "GOOGLE_PAY"

5.5 型ガードの実装

不確定な値をenumの型かどうかチェックする場合。

function isPaymentType(value: any): value is PaymentTypes {
  return Object.values(PaymentTypes).includes(value);
}

if (isPaymentType(someValue)) {
  // someValueはPaymentTypesの一つ
}

6. 注意点とベストプラクティス

  • コンパイル後のサイズ：enumはコンパイル後のコードが大きくなる傾向があります。軽量化が必要な場合は、Union Typesやオブジェクトリテラルの使用を検討してください。
  • const enumの使用：const enumを使用すると、コンパイル時に値がインライン展開され、コードサイズを削減できます。ただし、バンドラーの設定によっては問題が生じる場合があります。
const enum PaymentTypes {
  CREDIT_CARD = "CREDIT_CARD",
  APPLE_PAY = "APPLE_PAY",
  GOOGLE_PAY = "GOOGLE_PAY",
}
  • 型安全性の確保：不特定の値をenumに割り当てないように注意しましょう。

まとめ

TypeScriptのenumは、関連する定数を整理し、コードの可読性と保守性を高める強力な機能です。
数値型と文字列型のenumがあり、用途に応じて使い分けます。
類似するUnion Typesやオブジェクトリテラルとも比較し、それぞれの利点と欠点を理解することが重要です。

PaymentTypes enumは、支払い方法を管理する際に非常に有用であり、型安全なコードを書くのに役立ちます。

まさぴょんまさぴょん

TypeScript enum から JavaScript への変換について

enumはTypeScriptの独自機能であり、関連する定数値を一つのグループとしてまとめるために使用されます。
しかし、JavaScriptにはネイティブなenum構文は存在しないので、
TypeScriptで定義したenumは、コンパイル時にJavaScriptのオブジェクトに変換されます。

数値型enum (Numeric Enum)の場合

次のようなTypeScriptの数値型enumがあったとします👀✨

enum Direction {
  Up,
  Down,
  Left,
  Right
}

上記の enum は、コンパイルされるとJavaScriptでは次のように変換されます👀✨

var Direction = {
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3,
  0: "Up",
  1: "Down",
  2: "Left",
  3: "Right"
};

var Direction = {
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3,
  0: "Up",
  1: "Down",
  2: "Left",
  3: "Right",
};
console.log(Direction.Up); // 0
console.log(Direction[0]); // "Up"
console.log(Direction.Left); // 2
console.log(Direction[2]); // "Left"

文字列型enum (String Enum)の場合

次のようなTypeScriptの文字列型enumがあったとします👀✨

// 決済方法のEnum
export enum PaymentTypes {
  CREDIT_CARD = "CREDIT_CARD",
  APPLE_PAY = "APPLE_PAY",
  GOOGLE_PAY = "GOOGLE_PAY",
}

上記のような TypeScript の 文字列型 enum が JavaScript にコンパイルされると、以下のようなコードになります。

export var PaymentTypes;
(function (PaymentTypes) {
    PaymentTypes["CREDIT_CARD"] = "CREDIT_CARD";
    PaymentTypes["APPLE_PAY"] = "APPLE_PAY";
    PaymentTypes["GOOGLE_PAY"] = "GOOGLE_PAY";
})(PaymentTypes || (PaymentTypes = {}));

つまり、PaymentTypes は次のようなオブジェクトとして機能します。

{
  CREDIT_CARD: "CREDIT_CARD",
  APPLE_PAY: "APPLE_PAY",
  GOOGLE_PAY: "GOOGLE_PAY"
}

console.log(PaymentTypes.CREDIT_CARD); // 出力: "CREDIT_CARD"
console.log(PaymentTypes.APPLE_PAY);   // 出力: "APPLE_PAY"
まさぴょんまさぴょん

TypeScriptのenumを使うべきかどうか？

TypeScriptのenumを使うべきかどうかは、プロジェクトの要件やコードベースの設計方針によります。
以下では、enumの特徴、メリット・デメリット、そして代替手段であるUnion Typesやオブジェクトリテラルとの比較を詳しく解説します。

1. TypeScriptのenumの特徴

1.1 特徴

  • 列挙型：enumは関連する定数を一つの型としてまとめます。
  • 自動割り当て：数値型enumでは、値を指定しない場合、自動的に数値が割り当てられます。
  • 名前空間の提供：enumは独自の名前空間を持ち、コードの組織化に役立ちます。

1.2 メリット

  • 可読性の向上：関連する定数を一つにまとめることで、コードが理解しやすくなります。
  • 型安全性：enum型を使用することで、許容される値を限定できます。
  • IDEの補完機能：enumのメンバーが自動補完され、開発効率が上がります。

1.3 デメリット

  • コンパイル後のサイズ増加：enumはコンパイル後に追加のコードが生成され、バンドルサイズが大きくなります。
  • ランタイムオーバーヘッド：enumは実行時に存在するオブジェクトとなり、若干のパフォーマンスコストがあります。
  • 柔軟性の欠如：enumは拡張やマージが難しく、他の型システムとの相互運用性が低いです。

2. 代替手段との比較

2.1 Union Types（合併型） 

type PaymentTypes = "CREDIT_CARD" | "APPLE_PAY" | "GOOGLE_PAY";

メリット

  • 軽量：コンパイル後のコードに影響を与えません。
  • 型安全性が高い：文字列リテラル型として厳密な型チェックが行われます。
  • 柔軟性：型の合成や拡張が容易です。

デメリット

  • 名前空間がない：メンバーをグループ化する機能がありません。
  • メンバーの列挙が困難：enumのように全メンバーをプログラム的に取得するのが難しいです。

2.2 オブジェクトリテラル 

const PaymentTypes = {
  CREDIT_CARD: "CREDIT_CARD",
  APPLE_PAY: "APPLE_PAY",
  GOOGLE_PAY: "GOOGLE_PAY",
} as const;

type PaymentTypes = typeof PaymentTypes[keyof typeof PaymentTypes];

メリット

  • 軽量かつ高速：余計なランタイムオブジェクトを生成しません。
  • 型推論の活用：as constによってリテラル型が推論されます。
  • 柔軟性：プロパティの追加やマージが容易です。

デメリット

  • 冗長性：型定義がやや複雑になります。
  • 名前空間の欠如：enumのような独自の名前空間は提供されません。

3. 特徴・メリット・デメリットの比較表

項目 enum Union Types オブジェクトリテラル
型安全性 中程度 高い 高い
コンパイル後のサイズ 大きい 小さい 小さい
ランタイムオーバーヘッド あり なし なし
名前空間の提供 あり なし なし
柔軟性 低い 高い 高い
IDE補完 良好 良好 良好
メンバーの列挙 容易 困難 容易

4. enumを使うべきか？

4.1 enumを使うべきシナリオ

  • コードの可読性を重視する場合：enumは関連する定数を一つの型としてまとめ、明確に表現できます。
  • 既存のコードベースがenumを使用している場合：一貫性のためにenumを継続して使用する方が良いです。
  • 名前空間が必要な場合：enumは独自の名前空間を提供し、メンバーを整理できます。

4.2 代替手段を検討すべきシナリオ

  • パフォーマンスやバンドルサイズが重要な場合：Union Typesやオブジェクトリテラルの方が軽量です。
  • 型の拡張性が必要な場合：Union Typesやオブジェクトリテラルは型の合成や拡張が容易です。
  • ランタイムオーバーヘッドを避けたい場合：enumは実行時にオブジェクトを生成するため、オーバーヘッドがあります。

5. 結論とベストプラクティス

  • 小規模なプロジェクトやライブラリでは、Union Typesやオブジェクトリテラルを使用することを推奨します。これらは軽量でパフォーマンスに優れ、型安全性も高いです。
  • 大規模なコードベースやチーム開発では、enumの使用を検討できます。名前空間による組織化やIDEのサポートが、開発効率を向上させる場合があります。
  • const enumの活用：const enumを使用すると、コンパイル時にインライン展開され、ランタイムオーバーヘッドを削減できます。ただし、バンドラーやトランスパイラの設定によっては問題が生じる可能性があるため、注意が必要です。
const enum PaymentTypes {
  CREDIT_CARD = "CREDIT_CARD",
  APPLE_PAY = "APPLE_PAY",
  GOOGLE_PAY = "GOOGLE_PAY",
}
  • 一貫性の維持：プロジェクト内で一貫した方法を採用することが重要です。チームで合意したスタイルガイドに従いましょう。

追加の考慮事項

  • 型の拡張性：Union Typesは他のUnion Typesと合成でき、柔軟な型定義が可能です。

    type OnlinePayment = "PAYPAL" | "STRIPE";
type AllPaymentTypes = PaymentTypes | OnlinePayment;

  • 文字列リテラルの利点：Union Typesやas constを使用すると、文字列リテラル型が得られ、型推論や型安全性が向上します。

  • ランタイムの必要性：enumはランタイムに存在するため、値と型の両方として扱えます。これは特定の状況で有用ですが、多くの場合、ランタイムの存在は不要です。

まとめ

TypeScriptのenumは、コードの可読性と組織化に役立つ強力な機能ですが、パフォーマンスや柔軟性の観点からはデメリットも存在します。
代替手段であるUnion Typesやオブジェクトリテラルは、軽量で型安全性が高く、拡張性にも優れています。

最終的には、プロジェクトの要件やチームの好みに合わせて、最適な方法を選択することが重要です。
一貫性を保ちつつ、メリットとデメリットを考慮して判断してください。