序文: 列挙型は enum を使用して定義されます。 列挙型日{ 日曜日、 月曜日、 火曜日、 水曜日、 木曜日、 金曜日、 土曜日 } 上記で定義した列挙型 Day には 7 つの値があります。TypeScript 列挙型日{ 日曜日 = 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. 文字列の列挙
// 文字列リテラル enum Message を使用 { エラー = 「申し訳ありません、エラーが発生しました」 成功 = 「ほほー、成功」 } console.log(Message.Error); // '申し訳ありません、エラーが発生しました' // 列挙値内の他の列挙メンバーを使用する enum Message { エラー = "エラーメッセージ"、 ServerError = エラー、 ClientError = エラー } console.log(Message.Error); // 'エラーメッセージ' console.log(Message.ServerError); // 'エラーメッセージ'
3. 逆マッピング列挙型の値を定義する場合、 次の例を見てみましょう。 列挙ステータス{ 成功 = 200、 見つかりません = 404、 エラー = 500 } console.log(ステータス["成功"]); // 200 console.log(Status[200]); // '成功' console.log(Status[Status["Success"]]); // '成功'
上記のコードでコンパイルされた { 200:「成功」 404: 「見つかりません」 500: 「エラー」、 エラー: 500、 見つかりません: 404, 成功: 200 } ご覧の通り、 4. 異種列挙異種列挙とは、次のように、メンバー値が数値型と文字列型の両方を持つ列挙です。 列挙型結果{ 失敗 = 0、 成功 = 「成功」 } 開発中に非同期列挙を使用することはお勧めしません。値のクラスが列挙値に編成されると、それらの特性は類似していることが多いためです。例えば、インターフェースリクエストの場合は戻りステータスコードは数値、プロンプトメッセージの場合は文字列です。そのため、列挙型を使用する場合は、主に型を整理することで、異種の列挙型の使用を回避できる場合が多くあります。 5. 定数列挙
列挙ステータス{ オフ、 の上 } 定数列挙型動物{ 犬、 猫 } 定数ステータス = Status.On; 定数 animal = Animal.Dog; 上記のコードは次のように JavaScript にコンパイルされます。 var ステータス; (関数(ステータス) { ステータス[(Status["オフ"] = 0)] = "オフ"; ステータス[(Status["オン"] = 1)] = "オン"; })(ステータス || (ステータス = {})); var ステータス = Status.On; var animal = 0; // 犬
定数の列挙を定義することで、関連する定数のコレクションを明確で構造化された形式で維持できます。さらに、定義とインライン メンバー値は変換後に消去されるため、コード サイズとパフォーマンスは定数値を直接インライン化する場合よりも悪くなりません。 6. 列挙メンバー型と共用体列挙型列挙値のすべてのメンバーがリテラル型の値である場合、列挙の各メンバーと列挙値自体を型として使用できます。このような列挙メンバーをリテラル列挙メンバーと呼びます。 条件を満たす列挙メンバー値には次の 3 種類があります。
(1)列挙メンバー型すべての列挙ケースにリテラル列挙値がある場合、列挙ケースは型になります。 列挙型動物{ 犬 = 1、 猫 = 2 } インターフェース Dog { タイプ: Animal.Dog; } インターフェース Cat { タイプ: Animal.Cat; } 猫を: 猫 = { type: Animal.Dog // エラー [ts] 型 'Animal.Dog' は型 'Animal.Cat' に代入できません }; 犬としましょう: 犬 = { タイプ: 動物.犬 }; ご覧のとおり、コードの 7 行目では、型として (2)共同列挙型列挙値が条件を満たす場合、すべてのメンバーを含む共用体型とみなすことができます。 列挙ステータス{ オフ、 の上 } インターフェースライト{ ステータス: ステータス; } 列挙型動物{ 犬 = 1、 猫 = 2 } 定数light1: ライト = { ステータス: Animal.Dog // エラー 型 'Animal.Dog' は型 'Status' に割り当てることができません }; 定数light2: ライト = { ステータス: ステータスオフ }; 定数light3: ライト = { ステータス: ステータスオン }; 上記の例では、インターフェイス 7. 列挙のマージ一般的な列挙型について説明した後、列挙のマージの概念を見てみましょう。列挙型の値は個別に宣言できます。 列挙型日{ 日曜日、 月曜日、 火曜日 } 列挙型日{ 水曜日、 木曜日、 金曜日、 土曜日 } このとき、 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"; })(日 || (日 = {}));
以下もご興味があるかもしれません:
|
<<: Firefox で英語の文字が折り返されない問題の解決方法
>>: Django プロジェクトを作成して MySQL に接続する方法
ウィンドウの中央にブロック要素の位置を設定する方法ブロック要素をウィンドウの中央に配置する上記の方法...
目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...
1. provideとinjectの説明Provide と Inject により、ネストされたコンポ...
B-Tree インデックスに加えて、MySQL は次のインデックスも提供します。ハッシュインデックス...
この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...
CSS を使用して 3D フォト ウォールを作成します。具体的なコードは次のとおりです。 <!...
問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...
CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...
目次アポロ コンフィギュレーション センターとは何ですか?アポロの特徴クライアントアーキテクチャアー...
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 コー...
新しいコンピューターに変更したので、すべての環境を新しいコンピューター上で設定する必要があります。ふ...
1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...
目次1. 開発前の準備2. 新しいプロジェクトIdea は Java 開発のための強力なツールであり...
職業的な観点からも、人生の観点からも、良い再建をすることは本当に簡単ではありません。楽観的で熱心で前...
次の2つの関数は、 FIND_IN_SETと同じように使用されます。使用する場合、 FIND_IN_...