吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】Enum(列挙型)について

2014年10月12日 / category : typescript

TypeScriptには、Enumと呼ばれる仕組みがあります。
自分はまだTypeScriptの経験が浅いので、現在のところEnumをどういうケースで使うべきかわかっておりません。
正直、配列でいいのでは・・・、と思っております。。。

とりあえず、、、Enumの解説をしてみます。

TypeScript
enum Color{
	red,
	green,
	blue
}

var red:number = Color.red;
var green:number = Color.green;
var blue:number = Color.blue;

console.log( red, green, blue );

’0 1 2′
が出力されます。

これは何がどうなっているかと言うと、
コンパイルされたJavaScriptのコードを見れば仕組みがわかるのですが、
Colorオブジェクトを生成し、上から順に

Color["red"] = 0
Color["green"] = 1
Color["blue"] = 2

と、連想配列にインデックスを設定しています。
よって出力される値は、インデックスになります。

それでは、次のコードはどうでしょうか。

TypeScript
enum Color{
	red = 100,
	green = 101,
	blue = 102
}

var red:number = Color.red;
var green:number = Color.green;
var blue:number = Color.blue;

console.log( red, green, blue );

’100 101 102′
が出力されました。

インデックスの値を変更することができるようです。
それでは、次はどうでしょうか。

TypeScript
enum Color{
	red = '赤', //コンパイルエラー
	green = '緑', //コンパイルエラー
	blue = '青' //コンパイルエラー
}

これは全てコンパイルエラーです。
代入する値は、数値に限定されます。

TypeScript
enum Color{
	red = 100,
	green = red,
	blue = red * 2
}

ただし、上のようなコードは問題ありません。
全て中身は数値なので。

それでは、次のように参照方法を変えてみるとどうなるでしょうか。

TypeScript
enum Color{
	red = 100,
	green = 200,
	blue = 300
}

var red:string = Color[100];
var green:string = Color[200];
var blue:string = Color[300];

Color[400] = 'yellow';
var yellow:string = Color[400];

console.log( red, green, blue, yellow );

‘red green blue yellow’
が出力されました。

インデックスを指定すると、キーの値が返ってきました。
そして、yellowのように、Colorを定義した後に、追加することもできました。

TypeScript
enum Color{
	red = 100,
	green = 200,
	blue = 300
}

var red:Color = Color.red;
var green:Color = Color.green;
var blue:Color = Color.blue;

console.log( red, green, blue );

値を取得するときは、型指定をenum名(Color)にしても大丈夫みたいです。
ただし、キーを取得するときは、型指定をstringでなければいけないようです。

TypeScript
enum Color{
	red = 100,
	green = 200,
	blue = 300
}

class A{
	public colorIndex:number;
	public colorName:string
	constructor(_index:Color, _name:string){
		this.colorIndex = _index;
		this.colorName = _name;
	}
}

var a:A = new A( Color.red, Color[100] );
console.log( a.colorIndex, a.colorName );

Enumをクラスで使用すると、上のようなコードになります。