TypeScript 列挙型の説明: コードを明確にする鍵

TypeScript enums は、TypeScript 言語を扱うときによく出てくるフレーズです。

TypeScript は最も新しい言語の 1 つですが、開発者に最も人気のあるプログラミング言語の 1 つとしてもランク付けされています。 TypeScript は JavaScript の拡張機能 (スーパーセット) です。したがって、有効な JavaScript コードはすべて TypeScript でも有効です。ただし、TypeScript では静的型付け機能 (JavaScript には欠けている機能) が導入されています。

TypeScript Enum とは何ですか?その使用例とその作成方法は何ですか?この記事では、列挙型について知っておくべきことをすべて説明します。

TypeScript 列挙型とは何ですか?

Enum (列挙型) は、不変の値 (定数) のセットを保持する定数長のデータ構造です。 Enum を使用する言語は TypeScript だけではなく、C# や Java などのオブジェクト指向言語でも使用できます。

TypeScript では、列挙型を使用することで、開発者は一連の個別のケースやドキュメントの意図を作成できます。これらは、特定の数のみの値またはプロパティを設定する場合にも重要です。たとえば、世界には 7 つの大陸しか存在できません。

要約すると、TypeScript 列挙型は次の点で重要です。

• 開発者が意図やユースケースを簡単に文書化して表現できるため、柔軟性に優れています。
• 列挙型を使用すると、開発者は JavaScript でエネルギー効率の高いカスタム定数を作成できます。
• TypeScript コードを JavaScript コードにコンパイルする際のコンパイル時間とランタイムを節約します

TypeScript Enum は文字列または数値形式のいずれかにすることができます。ただし、これらの列挙型は前処理されており、テスト段階ではテストを受けません。 TypeScript は列挙型を JavaScript コードに変換/変換します。

TypeScript のさまざまな列挙型

Enum について理解できたので、次は TypeScript で Enum が動作することを見てみましょう。 TypeScript と Node.js をローカル マシンにダウンロードするか、オンライン ソリューションを使用して、開発サーバーをセットアップできます。 TypeScript Playground を 使用して、さまざまな TypeScript 列挙型を示します。

これらは TypeScript のさまざまな Enum 型です。

#1. 数値列挙型

キーワード「enum」を使用し、その後に作成する列挙型の名前を続ける必要があります。その後、列挙型のメンバーを指定するカリー括弧を作成します。これは数値列挙型の例です。

 enum CardinalDirections {
  North = 5,
  East,
  South,
  West,
};

上記は、4 つのメンバーを持つ CardinalDirections という名前の列挙型を表しています。この場合、値は 4 つ (North、East、South、West) のみであるため、データを保持するには enum が最適な選択肢になります。

CardinalDirections.North の値 5 を割り当てました。ただし、残りの部分は TypeScript が自動的に実行するため、他の値は割り当てていません。

たとえば、TypeScript が前の値を 1 ずつ増分するため、CardinalDirections.East の値は 6 になります。CardinalDirections.West は 8 になります。

カリー括弧内の最初の項目に値を割り当てないとどうなるでしょうか?私たちの列挙型は次のようになります。

 enum CardinalDirections {
  North,
  East,
  South,
  West,
};

TypeScript は北の値 0 を自動的に割り当てます。CardinalDirections.West のようなものを入力すると、3 が返されます。

#2. 文字列列挙型

文字列列挙型の各メンバーは、別の文字列列挙型メンバーまたは文字列リテラルで初期化する必要があります。これは文字列列挙の例です。

 enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

この列挙型は、数値列挙型の場合のように増加しません。このコードを実行すると、

 enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
console.log(Direction.Right)

これが得られるものです。

 "RIGHT" 

#3. 異種の列挙型

数値メンバーと文字列メンバーを混合して、異種列挙型を形成できます。これは一例です。

 enum HeterogeneousEnum {
  No = 0,
  Yes = "YES",
} 

#4. 定数および計算された列挙型メンバー

Enum メンバーには、「定数」または「計算済み」の値が関連付けられています。

これは 定数 enum の例です。

 enum E1 {
  X,
  Y,
  Z,
}

この場合、列挙型の最初のメンバーには初期化子がなく、TypeScript によって値 0 が割り当てられます。

この例を検討することもできます。

 enum E1 {
  X=1,
  Y,
  Z,
}

最初のメンバーには値が割り当てられ、増分ルールが残りのメンバーに適用されるため、これも定数列挙型です。

計算された列挙型には、 定数メンバーと計算されたメンバーが混在します。この例を確認してください。

 enum Color {
  Red = 100,
  Green = (Math.random() * 100),
  Blue = 200
}

Enum メンバー「Blue」は固定メンバーです。一方、列挙型メンバー「Green」は、実行時に Math.random() function を使用して計算される列挙型です。

#5. 定数列挙型

const enum は、数値列挙型のパフォーマンスを向上させるために使用されます。この場合、列挙型を const として宣言します。

曜日を示す次のコードを考えてみましょう。

 enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

console.log(Weekday.Thursday) を実行すると、答えは 4 になります。ただし、コンパイル時に生成された JavaScript を確認すると、次のことがわかります。

 "use strict";
var Weekday;
(function (Weekday) {
    Weekday[Weekday["Monday"] = 1] = "Monday";
    Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
    Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
    Weekday[Weekday["Thursday"] = 4] = "Thursday";
    Weekday[Weekday["Friday"] = 5] = "Friday";
})(Weekday || (Weekday = {}));
console.log(Weekday.Thursday);

このコードを変更して、「Weekday」を定数として宣言できます。

 const enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

このコード console.log(Weekday.Thursday) を実行すると、コンパイル時に生成される JavaScript は次のようになります。

 "use strict";
console.log(4 /* Weekday.Thursday */);

enum を const として宣言すると、コンパイル時の JavaScript コードが最適化されることがわかります。

#6. アンビエント列挙型

アンビエント列挙型は、「declare」キーワードを使用して、既存の列挙型の形状を記述します。この例を考えてみましょう。

 declare enum Color {
  Red,
  Green,
  Blue
}

アンビエント列挙型はモジュールの外部で宣言され、再利用可能な型の作成に使用できます。そのため、グローバルに宣言されている限り、いつでもアンビエント列挙型をインポートしてコンポーネントで使用できます。

TypeScript でオブジェクト型を抽出する方法

TypeScript のさまざまな列挙型について理解できました。ここで、列挙型をさまざまな方法で使用する方法を示します。これが参照コードになります。

 enum Direction {
  North = 'N',
  East = 'E',
  South = 'S',
  West = 'W',
};

これらはいくつかの使用例です。

• enum メンバーを抽出します 。たとえば、北にアクセスしたい場合は、次のように使用できます。

console.log(Direction.North); // Outputs: 'N'

• enum メンバーを使用する: 特定の enum メンバーを選択して、特定の方向を表すことができます。例えば、

 const currentDirection = Direction.East;
console.log(`The current direction is ${currentDirection}`);

これにより、「現在の方向は E です」という出力が得られます。

TypeScript における列挙型とオブジェクト マップの比較

列挙型は、 有限の値のセットを表すために使用されます。たとえば、虹の色や曜日などです。列挙型は厳密に型指定されており、開発中のあらゆるエラーを捕捉します。これは TypeScript 列挙型の例です。

 enum Color {
  Red,
  Green,
  Blue,
}

オブジェクト マップ/辞書/キーと値のペアは、 特定のキーに関連付けられた値を保存および取得します。 TypeScript オブジェクト マップを使用して、あらゆる種類のデータを保存できます。ただし、厳密に型指定されていないため、開発中に型エラーが捕捉されない可能性があります。これは、同じ色のオブジェクト マップの例です。

 const colors = {
  red: "FF0000",
  green: "00FF00",
  blue: "0000FF",
};

TypeScript の列挙型とオブジェクト マップの主な違いは次のとおりです。

• 列挙型は厳密に型指定されますが、オブジェクト マップは型指定されません。
• 列挙型は「タイプ」ですが、オブジェクトマップはデータ構造です
• 列挙型は柔軟ではありませんが、オブジェクト マップは柔軟です

TypeScript での列挙型の使用のベスト プラクティス

列挙機能を備えたプログラミング言語は TypeScript だけではないことはすでに述べました。ベスト プラクティスに従うことで、クリーンで最適化されたバグのないコードを作成できます。これらは、TypeScript 列挙型を作成または使用する際のベスト プラクティスの一部です。

• enum 名を大文字にする: enum に名前を付けるときは、常に最初の単語を大文字にします。たとえば、「number」の代わりに列挙型「Number」を使用することを常にお勧めします。
• 定数には列挙型を使用する: 列挙型は、関連項目の固定セットを宣言するのに最適です。たとえば、1 週間は 7 日しかありません。 enum メンバーは実行中に決して変更しないでください。
• 列挙型の過度の使用を避ける: 新しい概念を学習したばかりで、TypeScript プロジェクトのほぼすべての場所でそれを使用したいと考えているかもしれません。ただし、TypeScript 列挙型は常に適度に使用してください。 TypeScript 列挙型は、コードの可読性を維持したい場合に適しています。
• 列挙型を列挙型として考える: TypeScript 列挙型はさまざまな目的に使用できます。ただし、最良のオプションは、他のデータ構造ではなく、列挙型のみを表すためにこれらを使用することです。
• 自動列挙型を避ける: 明示的に割り当てない場合、TypeScript は列挙型メンバーに値を割り当てます。列挙値を指定して、コード実行時の予期しない動作を回避します。
• ドキュメントの列挙型: コードを一般の人々が利用することを意図している場合は、必ずコードをドキュメント化するかコメントしてください。各列挙型が何を行うのか、また最適な使用例である理由を説明します。

開発者として知っておくべき、トップの TypeScript ライブラリとランタイムを調べることもできます。

結論

TypeScript で列挙型を定義し、さまざまな型とその使用例を説明できます。 TypeScript は、コードを明確にしたい場合に便利です。ただし、それらを避け、代わりにオブジェクトを使用する必要がある場合もあります。

たとえば、動的な値を扱う場合は列挙型を使用しないでください。 enum を変数として使用することもできません。プログラムはエラーを返します。

TypeScript と JavaScript がまだ混乱している場合は、両者の違いについて詳しく学ぶことができます。