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 の丸い角と影のスタイルをサポートする

推薦する

入力ファイルの制御と美化について

一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると、[ファイルの選択]ダイアロ...

VMwareがwin10ホームバージョンに64ビットオペレーティングシステムをインストールできない問題を解決します

問題の説明VMware Workstationが新しい仮想マシンを作成し、64ビットオペレーティング...

Reactにおける制御されたコンポーネントと制御されていないコンポーネントの簡単な分析

目次制御されていないコンポーネント制御コンポーネント知らせ結論は制御されていないコンポーネントフォー...

グローバルトーストコンポーネントをカプセル化するVueの完全な例

目次序文1. vue-cliを使う1. Toastコンポーネントを定義する2. main.jsで設定...

HTML テーブルタグと関連する改行の問題の詳細な分析

テーブルとは何ですか?テーブルは、データのキャリアである HTML テーブルです。以下は比較的標準的...

Win10でのMySQL5.7.17無料インストール版の基本設定チュートリアルについて(画像とテキスト付き)

データベース アプリケーションは、アプリケーション システムに不可欠な部分です。リレーショナル デー...

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

MySQLのファジークエリの要約

1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...

CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...

MySQL 8.0.17 インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.17のインストールグラフィックチュートリアルを紹介します...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

CentOS6.8 は cmake を使用して MySQL5.7.18 をインストールします。

オンライン情報を参考に、cmakeを使用してCentOS6.8サーバーにMySQL5.7.18をイン...

Nexusプライベートサーバー構築原理とチュートリアル分析

1つ。 Nexus プライベート サーバーを構築する理由は何ですか?社内の開発メンバーは全員外部ネッ...

Dockerコンテナのいくつかの保存方法の詳細な説明

目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...

MySQL データベースのパフォーマンス最適化の概要

目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...