この記事ではTypeScriptにおけるEnumの使い方をご紹介します。
Enumとは？
Enumは別名「列挙型」と呼ばれています。
列挙と名のつく通り、複数の値を一つの変数で管理することが可能です。
EnumはJavaScriptでは取り扱いのない型となっているので注意してください。
TypeScriptにおけるEnumの書き方
具体的には以下のようにEnumで方を定義できます。
enum Shops {
AShop,
BShop,
CShop,
}上記で定義したEnumにアクセスするには以下のように記載します。
var shops = Shops.AShop;上記で定義したshopsに定義されていない文字列などを代入するとエラーを出力してくれるため安全性の高い開発が可能になります。
Enumの機能
では具体的にTypeScriptにおけるEnumの機能を見ていきましょう。
Enumを数値で管理する
TypeScriptでは、Enumに定義された内容を数値によって管理できます。
以下のように、Shopsの0番目に定義された内容であれば「AShop」という文字列が返却されます。
また、逆に「Shops.AShop」というようにEnum定義された内容を指定すると「0」という数値(number型)が返却されます。
enum Shops {
AShop,
Bshop,
Cshop
}
//Shopsの0番目を直接指定(出力：AShop)
console.log(Shops[0]);
//ShopsのAShopを直接指定(出力：0)
console.log(Shops.AShop);
console.log(Shops["AShop"]);Enumに定義された内容を数値によって管理できる
Enumで管理されている数値を変更できる
デフォルトの仕様で通常Enumの中の数値は0から始まります。
enum Shops {
AShop, // 0
Bshop, // 1
Cshop // 2
}0ではなく3から始めるといったことが可能です。
その場合最初の値に3を代入します。
enum Shops {
AShop = 3, // 3
Bshop, // 4
Cshop // 5
}
Enumに定義された内容を数値の始まりを変更できる
Enumを文字列で管理する
TypeScriptでは、Enumに定義された内容を文字列でも管理できます。
例えば以下のように定義します。
enum Shops {
NAME = 'AShop',
ADDRESS='xxxx_xxx_xxx',
CONTACT='000000000'
}Enumに定義された内容を文字列によって管理できる
Enumを定数として定義してパフォーマンスを上げる
Enumにconstを設定することによりパフォーマンスを上げることができます。
以下のようなEnumが存在存在し、Enumにアクセスをしたとします。
enum Result {
Ok,
Ng,
Unknown
}
var result = Result.Ok;このような形でアクセスするとJavaScriptにコンパイルする際に`var result = Result.Ok;`がそのまま出力されます。
本来このEnumのメンバー定数であり、動的に変化しないのであれば、`var result = 0;`と出力されたとしても結果は一緒ですね。
上記のような出力になればResultというEnumを作って、そこにアクセスするような処理をしなくて済むのでパフォーマンスが上がります。
そのため、enumの前にconstを付けることによってこれらを実現することができます。
const enum Result {
Ok,
Ng,
Unknown
}この記述によってコンパイルの結果`var result = 0;`がJavaScriptとして出力されます。
Enumにconstを設定すればパフォーマンスの向上を期待できる
TypeScriptにおけるEnumを理解しよう!
今回はTypeScriptにおけるEnumの使い方を紹介しました。
いかがだったでしょうか？
最近では、Enumは安全に使えないから非推奨なんて話も出ていますが、とはいえ現場では以前からEnumを使っていて対応しないといけない場面もあるかと思います。
ぜひこの機会にTypeScriptにおけるEnumの使い方を習得してみてください。
ここまで記事を読んでいただきありがとうございました♪
