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

推薦する

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

一般的でない js 演算演算子の概要

目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...

Vue3 ベースのフルスクリーン ドラッグ アップロード コンポーネント

この記事は主に、みんなで共有できるVue3ベースのフルスクリーンドラッグアップロードコンポーネントを...

イントラネット侵入を実現するためのSSHポート転送

LAN 内のマシンは外部ネットワークにアクセスできますが、外部ネットワークは内部ネットワークにアクセ...

クリーンなXHTML構文

XHTML を書くには、明確な HTML 構文が必要です。 XHTMLを書くには、きれいなHTML構...

Linuxブートサービスを起動する2つの方法

目次rc.local メソッドchkconfig メソッドrc.local メソッド1 まず自動的に...

MySQL InnoDB ロック メカニズムの詳細な例

1. InnoDBのロック機構InnoDB ストレージ エンジンは、行レベルのロックとトランザクショ...

MYSQLのバックアップデータのスケジュールクリアの特定の操作

1|0 背景プロジェクトの要件により、各月の履歴在庫データをアーカイブしてバックアップする必要があり...

JavaScript プリミティブデータ型シンボルの詳細な説明

目次導入説明名前の競合私有財産要約する導入シンボル変数を作成する最も簡単な方法は、Symbol() ...

JavaScript でフォロー広告を実装するためのサンプルコード

フローティング広告は、ウェブサイト上で非常に一般的な広告形式です。フローティング広告は、ユーザーの閲...

Vue+Websocketはチャット機能を実装するだけです

この記事では、チャット機能を簡単に実装するためのVue+Websocketの具体的なコードを参考まで...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

ユーザーエクスペリエンスの76の経験ポイントの要約

ウェブサイト体験の分類1. 感覚体験:快適性を重視した視聴覚体験をユーザーに提供します。 2. イン...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...