TypeScriptの列挙型を詳しく説明する

TypeScript 、オリジナルの ES 型をベースに列挙型が追加され、値のグループにもTypeScript内で名前を付けられるようになりました。これにより開発者にとって使いやすくなり、列挙が辞書であることが理解しやすくなります。

列挙型は enum を使用して定義されます。

列挙型日{
  日曜日、
  月曜日、
  火曜日、
  水曜日、
  木曜日、
  金曜日、
  土曜日
 }

上記で定義した列挙型 Day には 7 つの値があります。TypeScript TypeScript 、デフォルトで 0 から始まる番号をそれぞれに割り当てます。これらを使用するときは、番号と名前の対応を覚えていなくても名前を使用できます。

列挙型日{
  日曜日 = 0、
  月曜日 = 1、
  火曜日 = 2、
  水曜日 = 3、
  木曜日 = 4、
  金曜日 = 5、
  土曜日 = 6
}

上記のコードを JavaScript に変換すると次のようになります。

var Day = void 0;
(関数 (日) {
  Day[Day["SUNDAY"] = 0] = "SUNDAY";
  日[日["月曜日"] = 1] = "月曜日";
  Day[Day["TUESDAY"] = 2] = "TUESDAY";
  Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
  Day[Day["THURSDAY"] = 4] = "THURSDAY";
  日[日["FRIDAY"] = 5] = "FRIDAY";
  Day[Day["SATURDAY"] = 6] = "SATURDAY";
})(日 || (日 = {}));

ご覧のとおり、各値には対応する番号が割り当てられています。

TypeScript では、列挙セットのメンバーを取得するためにドット形式を使用する必要があります。

console.log(Day.SUNDAY) // 0
console.log(Day.MONDAY) // 1

列挙型の基本的な使用法について説明した後、一般的な列挙型を見てみましょう。

1. デジタル列挙

上記の例では、定数名のみを指定すると、0 から始まりデフォルトで増加する数値のセットが定義され、これをデジタル列挙と呼びます。別の値から増分を開始する場合は、最初の値のインデックスを指定できます。

列挙型カラー{
  赤 = 2、
  青、
  黄色
}
console.log(Color.Red, Color.Blue, Color.Yellow); // 2 3 4

フィールドにインデックス値を指定することができ、指定されていないインデックス値は 1 ずつ増加します。

//いくつかのフィールドを指定し、他のフィールドではデフォルトの増分インデックスを使用します enum Status {
  OK = 200、
  作成、
  承認されました、
  不正リクエスト = 400、
  許可されていない
}
console.log(Status.Created、Status.Accepted、Status.Unauthorized); // 201 202 401

さらに、各フィールドに不連続な任意のインデックス値を指定することもできます。

列挙ステータス{
  成功 = 200、
  見つかりません = 404、
  エラー = 500
}
console.log(Status.Success, Status.NotFound, Status.Error); // 200 404 500

数値列挙では、値を定義するときに計算値と定数を使用できます。ただし、フィールドで計算値または定数を使用する場合は、そのフィールドの直後のフィールドに初期値を設定する必要があります。ここではデフォルトの増分値は使用できません。例を見てみましょう。

// 初期値は計算された値です const getValue = () => {
  0を返します。
};
列挙型エラーインデックス{
  a = getValue(),
  b, // エラー列挙メンバーは初期化された値を持つ必要があります c
}
列挙型右インデックス{
  a = getValue(),
  b = 1、
  c
}
// 初期値は定数です const Start = 1;
列挙型インデックス{
  a = 開始、
  b, // エラー列挙メンバーは初期化された値を持つ必要があります c
}

2. 文字列の列挙

TypeScript 、値が文字列リテラルである列挙を文字列列挙と呼びます。文字列列挙値では、各フィールドの値が文字列リテラルまたは列挙値内の別の文字列列挙メンバーである必要があります。

// 文字列リテラル enum Message を使用 {
  エラー = 「申し訳ありません、エラーが発生しました」
  成功 = 「ほほー、成功」
}
console.log(Message.Error); // '申し訳ありません、エラーが発生しました'

// 列挙値内の他の列挙メンバーを使用する enum Message {
  エラー = "エラーメッセージ"、
  ServerError = エラー、
  ClientError = エラー
}
console.log(Message.Error); // 'エラーメッセージ'
console.log(Message.ServerError); // 'エラーメッセージ'

注:ここでの他の列挙メンバーは、同じ列挙値内の列挙メンバーを参照します。文字列列挙では定数や計算値を使用できないため、他の列挙値のメンバーは使用できません。

3. 逆マッピング

列挙型の値を定義する場合、 Enum['key']またはEnum.keyを通じて対応するvalueを取得できます。 TypeScript逆マッピングもサポートしていますが、逆マッピングでは数値列挙のみがサポートされ、文字列列挙はサポートされません。

次の例を見てみましょう。

列挙ステータス{
  成功 = 200、
  見つかりません = 404、
  エラー = 500
}
console.log(ステータス["成功"]); // 200
console.log(Status[200]); // '成功'
console.log(Status[Status["Success"]]); // '成功'

TypeScriptで定義された列挙型は、コンパイル後は実際にはオブジェクトになります。生成されたコードでは、列挙型はオブジェクトにコンパイルされ、これには順方向マッピング (名前 -> 値) と逆方向マッピング (値 -> 名前) が含まれます。

上記のコードでコンパイルされたStatusの効果を見てみましょう。

{
    200：「成功」
    404: 「見つかりません」
    500: 「エラー」、
    エラー: 500、
    見つかりません: 404,
    成功: 200
}

ご覧の通り、 TypeScript定義した列挙値のフィールド名をオブジェクトのプロパティ名とプロパティ値として使用し、列挙値のフィールド値をオブジェクトのプロパティ値とプロパティ名として使用し、同時にオブジェクトに追加します。この方法では、列挙値のフィールド名を通じて値を取得したり、列挙値の値を通じてフィールド名を取得したりできます。

4. 異種列挙

異種列挙とは、次のように、メンバー値が数値型と文字列型の両方を持つ列挙です。

列挙型結果{
  失敗 = 0、
  成功 = 「成功」
}

開発中に非同期列挙を使用することはお勧めしません。値のクラスが列挙値に編成されると、それらの特性は類似していることが多いためです。例えば、インターフェースリクエストの場合は戻りステータスコードは数値、プロンプトメッセージの場合は文字列です。そのため、列挙型を使用する場合は、主に型を整理することで、異種の列挙型の使用を回避できる場合が多くあります。

5. 定数列挙

TypeScriptでは、列挙値を定義した後、 JavaScriptにコンパイルされたコードによって、プログラムの実行時に使用できる対応するオブジェクトが作成されます。しかし、プログラムを読みやすくするためだけに列挙型を使用し、コンパイルされたオブジェクトを必要としない場合はどうなるでしょうか?これにより、コンパイルされたコードのサイズが増加します。 TypeScriptにはconst enum (定数列挙) があります。列挙を定義するステートメントの前にconstキーワードを追加します。このようにすると、コンパイルされたコードはこのオブジェクトを作成せず、置換のために列挙から対応する値を取得するだけです。

列挙ステータス{
  オフ、
  の上
}
定数列挙型動物{
  犬、
  猫
}
定数ステータス = Status.On;
定数 animal = Animal.Dog;

上記のコードは次のように JavaScript にコンパイルされます。

var ステータス;
(関数(ステータス) {
  ステータス[(Status["オフ"] = 0)] = "オフ";
  ステータス[(Status["オン"] = 1)] = "オン";
})(ステータス || (ステータス = {}));
var ステータス = Status.On;
var animal = 0; // 犬

Statusの処理では、まず変数 Status を定義し、次に即時実行される関数を定義し、関数内のStatusに対応するプロパティを追加します。まず、 Status[“Off”] = 0はStatusオブジェクトの Off プロパティを設定し、値を 0 に設定します。この代入式の戻り値は等号の右側の値である 0 であるため、 Status[Status [“Off”] = 0] = "Off"はStatus[0] = “Off”と同等です。このオブジェクトを作成した後、Status の On プロパティ値が status に割り当てられます。animal の処理を見てみましょう。コンパイルされたコードは Status のような Animal オブジェクトを作成しませんが、 Animal.Dogの値 0 をconst animal = Animal.Dog式の Animal.Dog の位置に直接置き換えます。

定数の列挙を定義することで、関連する定数のコレクションを明確で構造化された形式で維持できます。さらに、定義とインラインメンバー値は変換後に消去されるため、コードサイズとパフォーマンスは定数値を直接インライン化する場合よりも悪くなりません。

6. 列挙メンバー型と共用体列挙型

列挙値のすべてのメンバーがリテラル型の値である場合、列挙の各メンバーと列挙値自体を型として使用できます。このような列挙メンバーをリテラル列挙メンバーと呼びます。

条件を満たす列挙メンバー値には次の 3 種類があります。

初期値のない列挙メンバー。例: enum E { A }
値は文字列リテラルです。例: enum E { A = 'a' }
値は数値リテラル、または - 記号付きの数値リテラルです。例: enum E { A = 1 }、enum E { A = -1 }

（１）列挙メンバー型

すべての列挙ケースにリテラル列挙値がある場合、列挙ケースは型になります。

列挙型動物{
  犬 = 1、
  猫 = 2
}

インターフェース Dog {
  タイプ: Animal.Dog; 
}
インターフェース Cat {
  タイプ: Animal.Cat; 
}

猫を: 猫 = {
  type: Animal.Dog // エラー [ts] 型 'Animal.Dog' は型 'Animal.Cat' に代入できません
};
犬としましょう: 犬 = {
  タイプ: 動物.犬
};

ご覧のとおり、コードの 7 行目では、型としてAnimal.Dogが使用されており、インターフェイスDogにはAnimal.Dog型の型フィールドが必要であることが指定されています。

（２）共同列挙型

列挙値が条件を満たす場合、すべてのメンバーを含む共用体型とみなすことができます。

列挙ステータス{
  オフ、
  の上
}
インターフェースライト{
  ステータス: ステータス;
}
列挙型動物{
  犬 = 1、
  猫 = 2
}
定数light1: ライト = {
  ステータス: Animal.Dog // エラー 型 'Animal.Dog' は型 'Status' に割り当てることができません
};
定数light2: ライト = {
  ステータス: ステータスオフ
};
定数light3: ライト = {
  ステータス: ステータスオン
};

上記の例では、インターフェイスLightのstatusフィールドの型を列挙値Statusとして定義しています。この場合、 statusの属性値はStatus.Offまたは Status.On のいずれかでなければなりません。これは、 status: Status.Off | Status.Onと同等です。

7. 列挙のマージ

一般的な列挙型について説明した後、列挙のマージの概念を見てみましょう。列挙型の値は個別に宣言できます。

列挙型日{
  日曜日、
  月曜日、
  火曜日
 }

列挙型日{
  水曜日、
  木曜日、
  金曜日、
  土曜日
 }

このとき、 TypeScript列挙値をマージし、マージ後にJavaScriptにコンパイルされたコードは次のようになります。

var Day = void 0;
(関数 (日) {
  Day[Day["SUNDAY"] = 0] = "SUNDAY";
  日[日["月曜日"] = 1] = "月曜日";
  Day[Day["TUESDAY"] = 2] = "TUESDAY";
  Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
  Day[Day["THURSDAY"] = 4] = "THURSDAY";
  日[日["FRIDAY"] = 5] = "FRIDAY";
  Day[Day["SATURDAY"] = 6] = "SATURDAY";
})(日 || (日 = {}));

TypeScript列挙型に関する記事はこれで終わりです。TypeScript 列挙型についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: