TypeScript 列挙型

TypeScript 列挙型

1. 概要

列挙型は、値のセットに付けられた名前です。

enum型は C++ とJavaで一般的です。TypeScript TypeScript 、元のJavaScript型に基づいてenum型を追加します。

たとえば、ロールのセットを定義し、それを数字で表す必要がある場合は、次のコードを使用してそれらを見つけることができます。

列挙型ロール{
    学生、
    教師、
    管理者
}


上記のコードでは、3 つの値を含む列挙型として role を定義しています。TypeScript は各値にデフォルトで 0 から始まるシリアル番号を自動的に割り当て、その値は 0 1 2 となります。

もちろん、それぞれの値をカスタマイズすることもできます。すべてが定義されていない場合は、後続の値は前の値に応じて増加されます。

サンプルコードは次のとおりです。

列挙型ロール1 {
    学生 = 1,
    // 次の2つの値はそれぞれ2と3です
    教師、
    管理者、
}
列挙型ロール2 {
    // 各名前には指定された値があります。student = 1、
    教師 = 3,
    管理者 = 6,
}

2. デジタル列挙

上記で紹介した例は数値列挙型ですが、フィールドが定数または計算値を使用する場合は、フィールドの直後に初期値を設定する必要があり、そうしないと例外がスローされるという点にも注意が必要です。

サンプルコードは次のとおりです。

;(関数 () {
  // 関数を定義する const getValue: () => number = (): number => {
    0を返す
  }

  列挙型ロール1 {
    学生 = getValue(),
    // 教師、// エラー 列挙メンバーには初期化式が必要です。
    // admin、// error 列挙メンバーには初期化式が必要です。
  }
  定数 TEACHER_ROLE: 数値 = 3
  // 各名前には指定された値があります enum role2 {
    学生、
    教師 = TEACHER_ROLE、
    // admin、// error 列挙メンバーには初期化式が必要です。
  }
})()

2.1 逆マッピング

いわゆる逆マッピングでは、 key介してvalueアクセスしたり、値を介してキーにアクセスしたりできます。

.name または ['name'] を介してそれぞれの特定の値を取得したり、[value] を介して各値に対応する名前を取得したりできます。

サンプルコードは次のとおりです。

列挙型ロール {
    学生、
    教師、
    管理者、
}
コンソール.log(ロール.admin) // 2
console.log(ロール['教師']) //1
console.log(role[0]) //'学生'

実は、 TypeScriptの列挙型は JavaScript コードにコンパイルされた後はオブジェクトになります。上記の列挙型をコンパイルしてみましょう。

コンパイルされたコードは次のとおりです。

「厳密な使用」;
var ロール;
(機能 (役割) {
    role[role["学生"] = 0] = "学生";
    role[role["教師"] = 1] = "教師";
    ロール[role["管理者"] = 2] = "管理者";
})(役割 || (役割 = {}));


こちらのほうがわかりやすいかもしれません。実際には、自己調整機能を通じてロールオブジェクトに値を割り当てることです。割り当て後は次のようになります。

var ロール = {
    「学生」: 0,
    「先生」: 1,
    「管理者」: 2, 
    0:「学生」、 
    1:「先生」、 
    2: 「管理者」、 
} 


逆マッピングは数値列挙でのみサポートされ、バージョン 2.4 で追加された文字列列挙ではサポートされないことに注意してください。

3. 文字列の列挙

いわゆる文字列列挙とは、列挙内の各フィールドの値が文字列であるか、列挙内の他のフィールドが文字列である必要があることを意味します。

サンプルコードは次のとおりです。

列挙型人{
  名前 = '一碗の周'、
  趣味 = 「コーディング」、
  // 列挙体のフィールドを値として設定します。myName = name、
}
console.log(Person.name, Person.myName) // 1週間に1杯

4. const列挙

通常の列挙を定義すると、 JavaScriptコードにコンパイルされた後、対応するオブジェクトが作成されます。列挙を使用すると、プログラムの可読性が向上し、コンパイルされたオブジェクトは不要になります。 const列挙はTypeScript1.4で追加されました。

const列挙は、完全に埋め込まれた列挙に変換されます。いわゆる完全に埋め込まれた列挙とは、コンパイル後に対応するオブジェクトがないことを意味します。列挙から対応する値を取得し、それを置き換えるだけです。 const列挙を定義するには、通常の列挙の前に const キーワードを追加するだけです。

サンプルコードは次のとおりです。

定数列挙型ロール{
    学生、
    教師、
    管理者、
}
admin = role.admin とします。

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

admin = 2 /* 管理者 */ とします。


5. まとめ

この記事では、数値列挙と文字列列挙という 2 つの基本的な列挙型を紹介します。配列列挙にはリフレクション マッピングの概念もあり、キーを介して値にアクセスしたり、 valueにアクセスしたりできます。最後に、const 列挙も紹介しました。これは、コンパイル後にいわゆる列挙オブジェクトが生成されないことを意味します。

TypeScript列挙型に関するこの記事はこれで終わりです。TypeScript 列挙型に関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で Typescript を使用するサンプルコード
  • TypeScript の関数とクラスを理解していますか?
  • TypeScript のインターフェースとジェネリックを理解していますか?
  • TypeScript の基本型の紹介
  • 1つの記事でTypeScriptのデータ型について学ぶ
  • TypeScript型注釈の使い方の詳細な説明

<<:  MySQL スケジュール データベース バックアップ (フル データベース バックアップ) の実装

>>:  IE6、IE7、IE8 で CSS3 の丸い角と影のスタイルをサポートする

推薦する

react-diagram シリアル化 Json 解釈 ケース分析

このドキュメントの目的はreact-diagramフレームワーク モデルの Json シリアル化を説...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

MySQLカバーインデックスの詳しい説明

コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...

Linux nlコマンドの使い方

1. コマンドの紹介nl (行数) は指定されたファイルに行番号を追加し、標準出力に書き込みます。フ...

Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明

目次解決された主な問題1. バックエンドから返され、バックエンドに送信されるデータは、次の形式になり...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

MySQLは適切なストレージエンジンを選択します

データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...

CSS3 疑似クラスセレクターの簡単なレビュー

序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...

jQuery はラブエフェクトをクリックする

この記事では、jQueryのクリック時のラブエフェクトの具体的なコードを参考までに共有します。具体的...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...

MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明

MySQL データベースには増分バックアップ メカニズムはありませんが、マスター データベース内のす...

Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...