TypeScript における列挙型の理解と応用シナリオ

1. 何ですか

列挙型は、名前付き整数定数のセットです。名前付き定数のセットを宣言するために使用されます。変数に複数の値がある場合、列挙型として定義できます。

簡単に言えば、列挙とはオブジェクトのすべての可能な値のセットです。

日常生活でも非常によく見かけます。例えば、曜日を表す SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY などは列挙型とみなすことができます。

列挙体は構造体や共用体と同様に宣言され、次の形式になります。

enum 列挙名{
識別子①[=整数定数]、
識別子②[=整数定数]、
...
識別子N[=整数定数]、
}列挙変数;

2. 使用

列挙型は、次の形式で enum キーワードを使用して定義されます。

列挙型 xxx { ... }

キーワードを列挙型として宣言する方法は次のとおりです。

// 列挙型として宣言する Direction
d : 方向;

種類は以下のように分けられます:

数値列挙
文字列列挙
異種列挙

数値列挙

列挙型を宣言すると、値が割り当てられていないにもかかわらず、その値は実際にはデフォルトの数値型であり、デフォルトで 0 から累積されます。

列挙型方向{
    上、// デフォルト値は 0 です
    下、// デフォルト値は 1
    左、// デフォルト値は 2
    右 // デフォルト値は3です
}

console.log(Direction.Up === 0); // 真
console.log(Direction.Down === 1); // 真
console.log(Direction.Left === 2); // 真
console.log(Direction.Right === 3); // 真

最初の値を割り当てると、後続の値も前の値に応じて 1 ずつ累積されます。

列挙型方向{
    上 = 10、
    下、
    左、
    右
}

console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); // 10 11 12 13

文字列列挙

列挙型の値は、実際には文字列型になることがあります。

列挙型方向{
    上 = '上'、
    ダウン = 「ダウン」、
    左 = '左'、
    右 = '正しい'
}

console.log(Direction['Right'], Direction.Up); // 右上

変数が文字列に設定されている場合、後続のフィールドにも文字列を割り当てる必要があります。そうしないと、エラーが報告されます。

列挙型方向{
 上 = 'UP'、
 ダウン、// エラー TS1061: 列挙型メンバーには初期化子が必要です
 左、// エラー TS1061: 列挙型メンバーには初期化子が必要です
 右 // エラー TS1061: 列挙型メンバーには初期化子が必要です
}

異種列挙

つまり、デジタル列挙と文字列列挙を組み合わせて、次のように一緒に使用します。

列挙型ブール型異種列挙型 {
    いいえ = 0、
    はい = "はい"、
}

通常、異種列挙はほとんど使用されません

自然

列挙ケースは次のようになります。

列挙型方向{
    上、
    下、
    左、
    右
}

コンパイル後の JavaScript は次のようになります。

var 方向;
(関数 (方向) {
    方向[方向["上"] = 0] = "上";
    方向[方向["下"] = 1] = "下";
    方向[方向["左"] = 2] = "左";
    方向[方向["右"] = 3] = "右";
})(方向 || (方向 = {}));

上記のコードからわかるように、Direction[Direction["Up"] = 0] = "Up"は次のように分けられます。

方向["上"] = 0
方向[0] = "上"

したがって、列挙型を定義した後、次のように、順方向マッピングと逆方向マッピングを通じて対応する値を取得できます。

列挙型方向{
    上、
    下、
    左、
    右
}

console.log(Direction.Up === 0); // 真
console.log(Direction[0]); // 上

また、複数の場所で定義された列挙は、次のように結合できます。

列挙型方向{
    上 = '上'、
    ダウン = 「ダウン」、
    左 = '左'、
    右 = '正しい'
}

列挙型方向{
    中心 = 1
}

コンパイル後の js コードは次のようになります。

var 方向;
(関数 (方向) {
    方向["上"] = "上";
    Direction["Down"] = "Down";
    方向["左"] = "左";
    方向["右"] = "右";
})(方向 || (方向 = {}));
(関数 (方向) {
    Direction[Direction["Center"] = 1] = "Center";
})(方向 || (方向 = {}));

ご覧のとおり、Direction オブジェクトのプロパティが重ね合わされています。

3. 応用シナリオ

実際の例を見てみましょう。バックエンドから返されるフィールドは、対応する日付をマークするために 0 - 6 を使用します。この時点で、次のように列挙を使用してコードの読みやすさを向上させることができます。

列挙型の日数 {日、月、火、水、木、金、土};

console.log(Days["Sun"] === 0); // 真
console.log(Days["Mon"] === 1); // 真
console.log(Days["Tue"] === 2); // 真
console.log(Days["Sat"] === 6); // 真

バックエンドが 0、1 などを返す場合も含めて、列挙を通じて定義できるため、コードの可読性が向上し、その後のメンテナンスが容易になります。

参考文献

https://zh.wikipedia.org/wiki/%E6%9E%9A%E4%B8%BE

要約する

これで、TypeScript の列挙型の理解と応用シナリオに関するこの記事は終了です。TypeScript 列挙型に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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