Enum - TypeScript Deep Dive 日本語版

列挙型(Enums)
列挙型は、関連する値の集合を編成する方法です。他の多くのプログラミング言語(C/C#/Java)はenumデータ型を持っていますが、JavaScriptはありません。しかし、TypeScriptにはあります。TypeScript列挙型の定義例を次に示します。
1
enum CardSuit {
2
    Clubs,
3
    Diamonds,
4
    Hearts,
5
    Spades
6
}
7
​
8
// Sample usage
9
var card = CardSuit.Clubs;
10
​
11
// Safety
12
card = "not a member of card suit"; // Error : string is not assignable to type `CardSuit`
Copied!
これらのenum値はnumberなので、私は数値列挙型(Number Enums)と呼んでいます。
数値列挙数と数値(Number Enums and Numbers)
TypeScript列挙型は数値ベースです。これは、数値を列挙型のインスタンスに割り当てることができることを意味し、numberと互換性のあるものもそうです。
1
enum Color {
2
    Red,
3
    Green,
4
    Blue
5
}
6
var col = Color.Red;
7
col = 0; // Effectively same as Color.Red
Copied!
数値列挙型と文字列(Number Enums and Strings)
列挙型をさらに詳しく調べる前に、生成するJavaScriptを見てみましょう。ここにはサンプルのTypeScriptがあります：
1
enum Tristate {
2
    False,
3
    True,
4
    Unknown
5
}
Copied!
次のJavaScriptを生成します。
1
var Tristate;
2
(function (Tristate) {
3
    Tristate[Tristate["False"] = 0] = "False";
4
    Tristate[Tristate["True"] = 1] = "True";
5
    Tristate[Tristate["Unknown"] = 2] = "Unknown";
6
})(Tristate || (Tristate = {}));
Copied!
Tristate[Tristate["False"] = 0] = "False";という行に焦点を当てましょう。Tristate["False"] = 0は自己説明的でなければなりません。つまり、Tristate変数の"False"メンバを0に設定します。JavaScriptでは、代入演算子は割り当てられた値(この場合は0)を返します。したがって、JavaScriptランタイムによって次に実行されるのは、Tristate[0] = "False"です。これは、Tristate変数を使用して、列挙型の文字列バージョンを列挙型の数値または数値バージョンに変換することができることを意味します。これは以下のとおりです：
1
enum Tristate {
2
    False,
3
    True,
4
    Unknown
5
}
6
console.log(Tristate[0]); // "False"
7
console.log(Tristate["False"]); // 0
8
console.log(Tristate[Tristate.False]); // "False" because `Tristate.False == 0`
Copied!
数値列挙型に関連付けられた数値を変更する
デフォルトでは列挙型は「0」に基づいており、その後の各値は自動的に1ずつ増加します。例として、次の点を考慮してください。
1
enum Color {
2
    Red,     // 0
3
    Green,   // 1
4
    Blue     // 2
5
}
Copied!
ただし、任意の列挙型メンバに関連付けられた番号を、それに特に割り当てて変更することはできます。以下の例は3で始まりそこからインクリメントを開始します：
1
enum Color {
2
    DarkRed = 3,  // 3
3
    DarkGreen,    // 4
4
    DarkBlue      // 5
5
}
Copied!
ヒント：私はいつも最初の列挙型を= 1で初期化することによって、列挙型の値を安全にtruthyチェックできるようにします。
フラグとしての数値列挙型(Number Enums as flags)
列挙型の優れた使い方は、列挙型をフラグとして使用することです。フラグを使用すると、一連の条件から特定の条件が真であるかどうかを確認できます。動物に関する一連のプロパティがある次の例を考えてみましょう。
1
enum AnimalFlags {
2
    None           = 0,
3
    HasClaws       = 1 << 0,
4
    CanFly         = 1 << 1,
5
    EatsFish       = 1 << 2,
6
    Endangered     = 1 << 3
7
}
Copied!
ここでは、左シフト演算子を使用して、特定のビットレベルに1を移動することにより、ビット単位の「0001」、「0010」、「0100」および「1000」になります(これらは10進数の1、2、4、8です。興味があれば)。ビット演算子|(or)/&(and)/~(not)は、ビットフラグを使って作業するときの友達です。
1
enum AnimalFlags {
2
    None           = 0,
3
    HasClaws       = 1 << 0,
4
    CanFly         = 1 << 1,
5
}
6
type Animal = {
7
    flags: AnimalFlags
8
}
9
​
10
function printAnimalAbilities(animal: Animal) {
11
    var animalFlags = animal.flags;
12
    if (animalFlags & AnimalFlags.HasClaws) {
13
        console.log('animal has claws');
14
    }
15
    if (animalFlags & AnimalFlags.CanFly) {
16
        console.log('animal can fly');
17
    }
18
    if (animalFlags == AnimalFlags.None) {
19
        console.log('nothing');
20
    }
21
}
22
​
23
let animal: Animal = { flags: AnimalFlags.None };
24
printAnimalAbilities(animal); // nothing
25
animal.flags |= AnimalFlags.HasClaws;
26
printAnimalAbilities(animal); // animal has claws
27
animal.flags &= ~AnimalFlags.HasClaws;
28
printAnimalAbilities(animal); // nothing
29
animal.flags |= AnimalFlags.HasClaws | AnimalFlags.CanFly;
30
printAnimalAbilities(animal); // animal has claws, animal can fly
Copied!
ここでやったこと：
|=を使ってフラグを追加する
&=と~の組み合わせを使ってフラグをクリアする
|を使ってフラグを組み合わせる
注：フラグを組み合わせて、列挙型定義内の便利なショートカットを作成することができます。EndangeredFlyingClawedFishEatingは以下のようになります：
1
enum AnimalFlags {
2
    None           = 0,
3
    HasClaws       = 1 << 0,
4
    CanFly         = 1 << 1,
5
    EatsFish       = 1 << 2,
6
    Endangered     = 1 << 3,
7
​
8
    EndangeredFlyingClawedFishEating = HasClaws | CanFly | EatsFish | Endangered,
9
}
Copied!
文字列列挙型(String Enums)
メンバの値がnumberのenumを見てきました。実際には文字列値を持つ列挙型メンバを持つこともできます。例えば
1
export enum EvidenceTypeEnum {
2
  UNKNOWN = '',
3
  PASSPORT_VISA = 'passport_visa',
4
  PASSPORT = 'passport',
5
  SIGHTED_STUDENT_CARD = 'sighted_tertiary_edu_id',
6
  SIGHTED_KEYPASS_CARD = 'sighted_keypass_card',
7
  SIGHTED_PROOF_OF_AGE_CARD = 'sighted_proof_of_age_card',
8
}
Copied!
これらは意味を持ち/デバッグ可能な文字列値を提供するので、デバッグしやすくなります。
これらの値を使用して簡単な文字列の比較を行うことができます。例えば
1
// Where `someStringFromBackend` will be '' | 'passport_visa' | 'passport' ... etc.
2
const value = someStringFromBackend as EvidenceTypeEnum;
3
​
4
// Sample use in code
5
if (value === EvidenceTypeEnum.PASSPORT){
6
    console.log('You provided a passport');
7
    console.log(value); // `passport`
8
}
Copied!
定数列挙型(Const Enums)
次のような列挙型定義がある場合：
1
enum Tristate {
2
    False,
3
    True,
4
    Unknown
5
}
6
​
7
var lie = Tristate.False;
Copied!
var lie = Tristate.Falseという行はJavaScriptのvar lie = Tristate.Falseにコンパイルされます(出力は入力と同じです)。つまり、実行時にランタイムは TristateとTristate.Falseを検索する必要があります。ここでパフォーマンスを向上させるには、enumをconst enumとしてマークできます。これは以下のとおりです：
1
const enum Tristate {
2
    False,
3
    True,
4
    Unknown
5
}
6
​
7
var lie = Tristate.False;
Copied!
JavaScriptを生成する：
1
var lie = 0;
Copied!
コンパイラが行うこと：
1.列挙型のあらゆる用途をインライン化する(Tristate.Falseではなく0)
2.enum定義用のJavaScriptを生成しない(実行時にTristate変数はありません)。使用箇所はインライン展開される
定数列挙型に対する--preserveConstEnums(Const enum preserveConstEnums)
インライン化には明らかなパフォーマンス上の利点があります。実行時にTristate変数がないという事実は、実行時に実際には使用されないJavaScriptを生成しないことによって、コンパイラを助けることです。しかし、それでも先程のように数値型と文字列型を相互に検索できる列挙型を生成したい場合があるかもしれません。この場合、コンパイラフラグ--preserveConstEnumsを使用することができます。またvar Tristate定義を生成するので、実行時にTristate["False"]やTristate[0]を手動で使用することができます。これはインライン展開には決して影響しません。
静的関数を持つ列挙型(Enum with static functions)
宣言enumとnamespaceを合体させて、静的メソッドを列挙型に追加することができます。以下は、静的メンバisBusinessDayを列挙型Weekdayに追加する例を示しています：
1
enum Weekday {
2
    Monday,
3
    Tuesday,
4
    Wednesday,
5
    Thursday,
6
    Friday,
7
    Saturday,
8
    Sunday
9
}
10
namespace Weekday {
11
    export function isBusinessDay(day: Weekday) {
12
        switch (day) {
13
            case Weekday.Saturday:
14
            case Weekday.Sunday:
15
                return false;
16
            default:
17
                return true;
18
        }
19
    }
20
}
21
​
22
const mon = Weekday.Monday;
23
const sun = Weekday.Sunday;
24
console.log(Weekday.isBusinessDay(mon)); // true
25
console.log(Weekday.isBusinessDay(sun)); // false
Copied!
列挙型はオープンエンド
注：オープンエンドの列挙型は、モジュールを使用していない場合にのみ関係します。モジュールを使用するべきです。したがって、このセクションで触れるだけに留めます。
ここに再び表示される列挙型のJavaScriptが生成されます：
1
var Tristate;
2
(function (Tristate) {
3
    Tristate[Tristate["False"] = 0] = "False";
4
    Tristate[Tristate["True"] = 1] = "True";
5
    Tristate[Tristate["Unknown"] = 2] = "Unknown";
6
})(Tristate || (Tristate = {}));
Copied!
Tristate[Tristate["False"] = 0] = "False";部分については、すでに説明しました。今は、(function (Tristate) { /*code here */ })(Tristate || (Tristate = {}));部分を見ましょう。特に(Tristate || (Tristate = {}));。これは、基本的に既に捕捉されたローカル変数Tristateを指し示すか、新しい空のオブジェクト{}で初期化するローカル変数TriStateを取得します。
つまり、列挙型定義を複数のファイルに分割(および拡張)することができます。たとえば、以下の例では、Colorの定義を2つのブロックに分割しています
1
enum Color {
2
    Red,
3
    Green,
4
    Blue
5
}
6
​
7
enum Color {
8
    DarkRed = 3,
9
    DarkGreen,
10
    DarkBlue
11
}
Copied!
注意しなければならないのは、前の定義(つまり、0、1、...)を除外するために、列挙の最初のメンバ(ここではDarkRed = 3)を再初期化しないといけないことです。それを行わない場合は、TypeScriptは警告します(エラーメッセージ:In an enum with multiple declarations, only one declaration can omit an initializer for its first enum element.)。
前
インターフェース
次
lib.d.ts
最終更新 2yr ago
リンクのコピー
列挙型(Enums)
数値列挙数と数値(Number Enums and Numbers)
数値列挙型と文字列(Number Enums and Strings)
数値列挙型に関連付けられた数値を変更する
フラグとしての数値列挙型(Number Enums as flags)
文字列列挙型(String Enums)
定数列挙型(Const Enums)
静的関数を持つ列挙型(Enum with static functions)
列挙型はオープンエンド