HTML5テクニカルノート

TypeScript: 列挙型

ID: FN1703005
Technique: HTML5 / JavaScript
Package: TypeScript 2.2

TypeScript公式Handbook「Enums」をもとにした解説です。列挙型enumは、任意の数の識別子に数値を定めます。数値が意味のある名前で扱えるということです。選択肢やオプションなどにわかりやすい名前をつけて、内部的には数値として処理することができます。

01 列挙型を定める

列挙型はenumキーワードのあとに名前(識別子)をつけて定めます。つぎの列挙型(ArrowKey)は、上下左右の矢印キーのキーコードに名前を与えました。代入を省くと、前の識別子の値からの連番になります。


enum ArrowKey {
	LEFT = 37,
	UP,
	RIGHT,
	DOWN
}

列挙型(ArrowKey)としてつくられるのは、つぎのようなオブジェクトです。


Object {37: "LEFT", 38: "UP", 39: "RIGHT", 40: "DOWN", LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40}

列挙型は数が0以上のメンバーに数値を与えて定めます。数値は定数または計算値です。つぎの場合は定数とみなされます。

初期値がなく、前のメンバーが定数をもつ。
- 前のメンバーの定数に1加えた数値が与えられる。
- 初期値のない先頭のメンバーには0が与えられる。
メンバーがenum定数式の初期値をもつ。
enum定数式はTypeScriptの式のサブセットで、コンパイル時に評価される。enumの定数式はつぎのいずれか。
- 数値リテラル
- 先に定められたenumメンバーを参照する。
  他の列挙型も参照できる。同じ列挙型のメンバーには列挙型の名前を添えなくてももよい。
かっこでくくられたenum定数式。
単項演算子+、-、~の用いられたenum定数式。
二項演算子+、-、*、/、%、<<、>>、>>>、&、|、^にenum定数式がオペランドとして用いられた式。
enum定数式がNaNまたはInfinityと評価されるとコンパイル時にエラーとなる。

以上のいずれにも当てはまらない値は計算値として扱われます。


enum ColorInt {
	// 定数
 	BLACK, 	BLUE = 0xFF,
	GREEN = BLUE << 8,
	RED = GREEN << 8,
	WHITE = RED | GREEN | BLUE,
	// 計算値
	RANDOM = Math.floor(Math.random() * 0xFFFFFF)
}

この列挙型は、つぎのJavaScriptコードにコンパイルされます。


var ColorInt;
(function (ColorInt) {
	// 定数
	ColorInt[ColorInt["BLACK"] = 0] = "BLACK";
	ColorInt[ColorInt["BLUE"] = 255] = "BLUE";
	ColorInt[ColorInt["GREEN"] = 65280] = "GREEN";
	ColorInt[ColorInt["RED"] = 16711680] = "RED";
	ColorInt[ColorInt["WHITE"] = 16777215] = "WHITE";
	// 計算値
	ColorInt[ColorInt["RANDOM"] = Math.floor(Math.random() * 0xFFFFFF)] = "RANDOM";
})(ColorInt || (ColorInt = {}));

列挙型がランタイムのオブジェクトとされる理由のひとつは、識別子から値を参照できるだけでなく、値から名前が取り出せるようにするためです。


console.log(ColorInt[0xFFFFFF]);  // WHITE

02 列挙型定数

列挙型のメンバーを定数として使うだけで、名前の取り出しも要らない場合には、キーワードenumの前にconst修飾子を添えれば、すべてのメンバーが定数とされ、計算値は使えなくなります。


const enum ArrowKey {
	LEFT = 37,
	UP,
	RIGHT,
	DOWN
}
document.addEventListener('keydown', function(eventObject) {
	let keyCode = eventObject.keyCode;
	let direction = '・';
	switch (keyCode) {
		case ArrowKey.LEFT:
			direction = '←';
			break;
		case ArrowKey.UP:
			direction = '↑';
			break;
		case ArrowKey.RIGHT:
			direction = '→';
			break;
		case ArrowKey.DOWN:
			direction = '↓';
			break;
	}
	console.log(direction);
});

このコードはつぎのJavaScriptにコンパイルされます。列挙型を表すオブジェクト(ArrowKey)がなくなり、メンバーの参照はすべて定数に置き替わります。その分コードは短くなりました。


document.addEventListener('keydown', function (eventObject) {
    let keyCode = eventObject.keyCode;
    let direction = '・';
    switch (keyCode) {
        case 37 /* LEFT */:
            direction = '←';
            break;
        case 38 /* UP */:
            direction = '↑';
            break;
        case 39 /* RIGHT */:
            direction = '→';
            break;
        case 40 /* DOWN */:
            direction = '↓';
            break;
    }
    console.log(direction);
});

03 アンビエント列挙型

アンビエント列挙型は、すでにある列挙型の形式を宣言するために用いられます。メンバーの初期値に、計算値は与えられません。定数(const)でない列挙型のメンバーは、初期値がないとき計算値とみなされます(「How do the different enum variants work in TypeScript?」参照)。


declare enum Enum {
	A = 1,
	B,  // 計算値
	C = 2
}

作成者: 野中文雄
作成日: 2017年3月27日