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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScriptの列挙型を詳しく説明する
  • TypeScript 列挙型

<<:  一般的な HBase 運用および保守ツール 10 個の概要

>>:  MySQLデータベース入門:データベースバックアップ操作の詳細な説明

推薦する

カタツムリ映画システムのDocker展開の詳細なプロセス分析

環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....

MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論

目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...

MySQL の昇順および降順データソートの実装

データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...

テキストエリアタグはサイズ変更できず、マウスでドラッグすることもできません

テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...

VUEの基本を理解するのに役立つ記事

目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...

Linux インストール Redis 実装プロセスとエラー解決

今日、redis をインストールしたところ、今までになかったいくつかのエラーが発生しました。ここで記...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...

星のきらめき効果を実現するネイティブ js

この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

複数の古いプレーヤーの埋め込みコード

ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...

Docker での WSL の構成と変更の問題について

https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...

CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する

最終的な効果は次のようになります。アニメーションは2つのステップに分かれていますランニング軌道を開発...

Vueオプションの詳細な説明

目次1. オプションとは何ですか? 2. 含まれる属性3. エントリー属性エルデータ方法コンポーネン...

MySQL アーキテクチャのナレッジポイントの概要

1. データベースとデータベースインスタンスMySQL の研究では、データベースとデータベース イン...

CentOS 8 仮想マシンから Windows 10 ホスト フォルダーにアクセスする方法の簡単な分析

VMware Toolsをインストールすると、仮想マシンホスト間で①テキストをコピーして貼り付けるこ...