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データベース入門:データベースバックアップ操作の詳細な説明

推薦する

JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ

要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...

初心者のための入門チュートリアル⑤:ウェブサイト登録はとても簡単、簡単な登録のヒント

スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

Navicat を使用して csv ファイルを MySQL にインポートする

この記事では、参考までに、Navicatを使用してCSVファイルをMySQLにインポートするための具...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定され...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

CSS 極座標のサンプルコード

序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...

Ubuntu環境でxdebugをコンパイルしてインストールする方法

この記事では、Ubuntu 環境で xdebug をコンパイルしてインストールする方法について説明し...

負の距離(共感) - 相互影響の反復プロセス

ネガティブな距離は共感を意味します。序文(疑問の提起):プロダクトマネージャーは機能を把握します。機...

Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...