Object.values() メソッドを使ってEnumの値の名前を取得する
TypeScriptにおけるEnumの値の名前を取得する方法
ここでは、Enumの値の名前を取得する3つの方法について解説します。
enum キーワード
最もシンプルな方法は、enum キーワードを使用する方法です。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const aName = MyEnum.A; // "A"
const bName = MyEnum.B; // "B"
const cName = MyEnum.C; // "C"
この方法では、Enumの値の名前は、enum キーワードとドット記法を使って直接参照できます。
Object.keys() メソッドを使用して、Enumのすべてのキーを取得することもできます。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const names: string[] = Object.keys(MyEnum); // ["A", "B", "C"]
この方法では、Object.keys() メソッドによって取得されたキーをループ処理することで、Enumのすべての値の名前を取得できます。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const values: number[] = Object.values(MyEnum); // [1, 2, 3]
Enumの値の名前を取得するには、上記3つの方法を使用できます。それぞれの特徴を理解して、状況に応じて使い分けてください。
enum キーワード
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const aName = MyEnum.A; // "A"
const bName = MyEnum.B; // "B"
const cName = MyEnum.C; // "C"
console.log(aName, bName, cName); // "A B C"
Object.keys()
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const names: string[] = Object.keys(MyEnum); // ["A", "B", "C"]
console.log(names); // ["A", "B", "C"]
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const values: number[] = Object.values(MyEnum); // [1, 2, 3]
console.log(values); // [1, 2, 3]
これらのサンプルコードを実行することで、Enumの値の名前を取得する方法をより理解することができます。
逆引きマップ
Enumの値と名前を逆引きするためのマップを作成する方法です。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const nameMap: Record<number, string> = {
[MyEnum.A]: "A",
[MyEnum.B]: "B",
[MyEnum.C]: "C",
};
const aName = nameMap[MyEnum.A]; // "A"
const bName = nameMap[MyEnum.B]; // "B"
const cName = nameMap[MyEnum.C]; // "C"
console.log(aName, bName, cName); // "A B C"
この方法では、Enumの値をキーとして、名前を値としてマップを作成しておきます。その後、Enumの値から名前を取得するには、マップから値を取得するだけです。
テンプレートリテラルを使用して、Enumの値と名前を連想配列に変換する方法です。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const names = {
...(function () {
const keys = Object.keys(MyEnum) as (keyof typeof MyEnum)[];
return keys.reduce((acc, key) => {
acc[MyEnum[key]] = key;
return acc;
}, {} as Record<number, string>);
})(),
};
const aName = names[MyEnum.A]; // "A"
const bName = names[MyEnum.B]; // "B"
const cName = names[MyEnum.C]; // "C"
console.log(aName, bName, cName); // "A B C"
この方法では、テンプレートリテラルを使用して、Enumの値と名前を連想配列に変換します。その後、Enumの値から名前を取得するには、連想配列から値を取得するだけです。
Enumを拡張して、getName() メソッドのような、名前を取得するためのメソッドを追加する方法です。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
Object.defineProperty(MyEnum, "getName", {
value: function (this: MyEnum): string {
return this.toString();
},
});
const aName = MyEnum.A.getName(); // "A"
const bName = MyEnum.B.getName(); // "B"
const cName = MyEnum.C.getName(); // "C"
console.log(aName, bName, cName); // "A B C"
この方法では、Object.defineProperty() メソッドを使用して、EnumにgetName() メソッドを追加します。その後、Enumの値から名前を取得するには、getName() メソッドを呼び出すだけです。
補足
- 上記で紹介した方法は、TypeScript 2.4以降で使用できます。
- TypeScript 4.0以降では、
enumキーワードを使用して、Enumの値の名前を直接取得することができます。
enum MyEnum {
A = 1,
B = 2,
C = 3,
}
const aName = MyEnum.A; // "A"
console.log(aName); // "A"
enums typescript
