TypeScript 列挙の基本と例

序文

列挙型は TypeScript でサポートされているデータ型です。列挙型を使用すると、名前付き定数のセットを定義できます。これらを使用すると、意図をより簡単に文書化したり、さまざまなケースのセットを作成したりできます。列挙型は主に Java や C# などのオブジェクト指向プログラミング言語で使用されますが、現在は TypeScript でも使用できます。これらは、JavaScript の型レベルの拡張ではない TypeScript の数少ない機能の 1 つです。次に、TypeScript 列挙体の基本と、使用例、さまざまな列挙型、および学習の次のステップについて説明します。

TypeScript の列挙型とは何ですか?

C、C#、Java などの多くのプログラミング言語には列挙データ型がありますが、JavaScript にはありません。しかし、TypeScript では可能です。TypeScript には数値ベースと文字列ベースの両方の列挙型があります。 TypeScript 列挙型を使用すると、開発者は名前付き定数のセットを定義できます。これらを使用すると、意図をより簡単に文書化したり、さまざまなケースのセットを作成したりできます。

列挙の構文は次のとおりです。

列挙型状態{
    りんご、
    オレンジ、
    バナナ、
    スイカ
}
// 使用法 var fruit = States.Watermelon;

TypeScriptで列挙型を使用する際に注意すべきこと

まず、列挙内の値は定数です。つまり、列挙は型安全であり、値が再割り当てされるとコンパイル エラーが返されます。 2 番目に、列挙は有限である必要があり、これにより、ユーザーはカスタム定数システムを作成できます。列挙はコンパイル後のオブジェクトです。JavaScript でメモリ効率の高いカスタム定数を作成し、記録の意図を柔軟かつ簡単に表現し、判断のユースケースとして便利です。

列挙型リクエストステータス{
    成功 = 200
    エラー = 400
}

requestStatus を実行します。
(関数 (リクエストステータス) {
    requestStatus[requestStatus["success"] = 200] = "成功"
    リクエストステータス[リクエストステータス["エラー"] = 400] = "エラー"
})(リクエストステータス || (リクエストステータス = {}));

// リクエストステータス:
// { '200': '成功'、 '400': 'エラー'、エラー: 400、成功: 200 }

一般的な列挙型

数値列挙と文字列列挙は、TypeScript で最もよく使用される列挙型です。以下では、例を使用して、それらの特徴と使用方法を紹介します。

** 数値列挙

数値列挙は数値を文字列として格納します。 enum キーワードを使用して定義してみましょう。以下では、さまざまな種類の車のセットを格納する例を使用して、TypeScript での数値列挙について説明します。

列挙型CarType {
    ホンダ、
    トヨタ、
    スバル、
    ヒュンダイ
}

CarType 列挙には、Honda、Toyota、Subaru、Hyundai の 4 つの値があります。列挙値は 0 から始まり、各メンバーの値は以下に示すように 1 ずつ増加します。

ホンダ = 0

トヨタ = 1

スバル = 2

ヒュンダイ = 3

必要に応じて、次のように最初の値を自分で初期化できます。

列挙型CarType {
    ホンダ = 1,
    トヨタ、
    スバル、
    ヒュンダイ
}

上記の例では、Honda は最初のメンバーを値 1 で初期化します。残りの数字は 1 つずつ増加します。

最後の値を変更すると、以前の値は最後に定義された値だけ減算されるのだろうかと疑問に思うかもしれません。試してみましょう:

列挙型CarType {
    ホンダ、
    トヨタ、
    スバル、
    ヒュンダイ = 100
}

残念ながらこれは機能しません。現在の例の値は次のとおりです。

列挙型CarType {
    ホンダ、// 1
    トヨタ、// 2
    スバル、// 3
    ヒュンダイ // 100
}

注意: 列挙メンバーに序数値を割り当てる必要はありません。任意の値を割り当てることができます

文字列列挙

文字列列挙は数値列挙に似ていますが、列挙値は数値ではなく文字列値で初期化されます。 文字列列挙は数値列挙よりも読みやすく、プログラムのデバッグが容易になります。

次の例では、数値列挙の例と同じ情報を使用しますが、文字列列挙として表現されています。

列挙型CarType {
    ホンダ = "HONDA"、
    トヨタ = "TOYOTA"、
    スバル = 「SUBARU」、
    ヒュンダイ = 「HYUNDAI」
}

// 文字列列挙にアクセス CarType.Toyota; // TOYOTA を返す

注意: 文字列列挙値は個別に初期化する必要があります。

列挙逆マッピング

列挙型は、対応する列挙型メンバー値を使用して num 値を取得できます。逆マッピングを使用すると、次の例に示すように、メンバーの値とその名前にアクセスできます。

列挙型CarType {
    ホンダ = 1,
    トヨタ、
    スバル、
    ヒュンダイ
}
CarType.Subaru; // 3 を返す
CarType.["Subaru"]; // 3 を返す
CarType[3]; //Subaruを返す

CarType[3]は逆マッピングによりメンバー名「Subaru」を返します。別の例を見てみましょう。

列挙型CarType {
    ホンダ = 1,
    トヨタ、
    スバル、
    ヒュンダイ
}
console.log(車種)

ブラウザのコンソールに次の出力が表示されます。

{
'1': 'ホンダ'、
'2': 'トヨタ'、
'3': 'スバル'、
'4': 'ヒュンダイ'、
ホンダ：1、
トヨタ：2、
スバル：3、
ヒュンダイ：4
}

列挙の各値は、内部に格納された列挙オブジェクトに 2 回出現します。

計算された列挙

列挙メンバーの値は定数値または計算値にすることができます。次の例を見てください。

列挙型CarType {
    ホンダ = 1,
    トヨタ = getCarTypeCode('toyota'),
    スバル＝トヨタ×3、
    ヒュンダイ = 10
}

関数 getCarTypeCode(carName: 文字列): 数値 {
    車名 === 'トヨタ' の場合 {
        5を返します。
    }
}

CarType.Toyota; // 5 を返す
CarType.Subaru; // 15 を返します

列挙体に計算メンバーと定数メンバーの両方が含まれている場合、初期化されていない列挙メンバーが最初に表示され、数値定数を持つ他の初期化されたメンバーの後に表示されることもあります。次の例ではエラーが表示されます。

列挙型CarType {
    トヨタ = getCarTypeCode('toyota'),
    Honda、// エラー: Enum メンバーには初期化子が必要です
    スバル、
    ヒュンダイ = トヨタ * 3、
}

上記の列挙は次のように宣言できます。

列挙型CarType {
    ホンダ、
    ヒュンダイ、
    トヨタ = getCarTypeCode('toyota'),
    スバル＝トヨタ×3

以上がこの記事の全内容です。列挙とは何かを説明することで、列挙を使用する際に注意すべき点が明らかになります。よく使用される列挙型 (数値列挙、文字列列挙)、列挙の逆マッピング、計算列挙。列挙についてはすでにある程度理解されていると思います

要約する

TypeScript 列挙型の基礎と例についてはこれで終了です。TypeScript 列挙型の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。