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

推薦する

MySQLオンラインDDL gh-ostの使用の概要

背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...

CentOS7 64 ビットでの MySQL 5.7 のインストールと設定のチュートリアル

インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...

IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...

Docker で Maven プロジェクトをより速くビルドする

目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....

win10 での mysql5.7.21 の詳細なインストール手順

この記事では、MySQL 5.7.21のインストールとインストール中に発生した問題を参考までに紹介し...

CSS3はさまざまな境界効果を実現します

半透明の境界線結果: 実装コード: <div> 半透明の境界線が見えますか? </...

Vue要素と多言語切り替えの詳細な説明

目次序文複数の言語を切り替えるにはどうすればいいですか? 1. vue-i18nパッケージをインスト...

CentOS 環境で NFS リモート ディレクトリ マウントを使用する手順の紹介

目次1. NFS の概要2. NFS構築1. NFSサーバーの構築2. NFSクライアントの構築3....

ウェブデザイン必携ハンドブック 216 ウェブセーフカラー

Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...

CentOS 8で自動更新を設定するための手順を完了する

データとコンピューターに対してできる最善のことは、それらを安全に保つことです。アップデートを有効にす...

CSS3はウェブサイトの製品表示効果図を実現します

この記事では、CSS3 を使用した Web サイトの商品表示の効果を紹介し、皆さんと共有します。詳細...

VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする

1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

Linux でファイル権限を変更する chmod コマンドの詳細な分析

Linux chmodコマンドを使用して、ターゲット ファイルにアクセス、読み取り、書き込み、または...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...