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ページを作成する方法

目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

Vue 画像切り抜きコンポーネントのサンプルコード

例:ヒント:このコンポーネントはvue-cropperの二次パッケージに基づいていますプラグインをイ...

JDBC を使用して MySQL を操作するための簡単な分析では、Class.forName("com.mysql.jdbc.Driver") を追加する必要があります。

導入データベースに接続するためにJDBCを使用することに慣れている場合は、データベースに接続するため...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

MySQL マスターライブラリ binlog (master-log) とスレーブライブラリ relay-log 間のコードの詳細な説明

メインライブラリのバイナリログ: # 2420 で #170809 17:16:20 サーバー ID...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

Docker コンテナに TensorRT をインストールする際の問題

Ubuntu にインストールされているバージョンをアンインストールします。 sudo apt-get...

W3C チュートリアル (15): W3C SMIL アクティビティ

SMIL は、Web にタイミングとメディアの同期のサポートを追加します。 SMIL は、Web に...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

MySQL データベース内の varchar 型の数値のサイズを比較する方法

テストテーブルを作成する -- ---------------------------- -- ch...

VUE ユニアプリカスタムコンポーネントについての簡単な説明

1. 親コンポーネントはpropsを通じて子コンポーネントにデータを渡すことができる2. 子コンポー...

Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します

VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...

Linux 環境変数とプロセス アドレス空間の概要

目次Linux 環境変数とプロセスアドレス空間コードを通じて環境変数を取得するプロセスアドレス空間な...

CSS3でハートを描く

成果を達成する要件/機能: CSS + HTML を使用してハートを描く方法。分析:正方形と 2 つ...