TypeScript Handbook を読む (7. Enums)

[TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/basic-types.html) を読み進めていく第七回目。

1. [Basic Types](http://qiita.com/murank/items/9c1f633545842c953947)
1. [Variable Declarations](http://qiita.com/murank/items/913f1c1e4e725047436c)
1. [Interfaces](http://qiita.com/murank/items/553276c3dc2eec9bfe47)
1. [Classes](http://qiita.com/murank/items/7e8f15225bc8259e9bf3)
1. [Functions](http://qiita.com/murank/items/e310ce68ed5a0058d42d)
1. [Generics](http://qiita.com/murank/items/144b686d34fd433a97a3)
1. Enums (今ココ)
1. [Type Inference](http://qiita.com/murank/items/e67ad7426020321228e9)
1. [Type Compatibility](http://qiita.com/murank/items/606efb0615294a6826e3)
1. [Advanced Types](http://qiita.com/murank/items/bc1776efbecbd2120d94)
1. [Symbols](http://qiita.com/murank/items/04b3b31caa677750f240)
1. [Iterators and Generators](http://qiita.com/murank/items/7ceec53dde886f31a682)
1. [Modules](http://qiita.com/murank/items/0fc4e059be8ea5e1c274)
1. [Namespaces](http://qiita.com/murank/items/0dfad4a0bb91aaa6c97b)
1. [Namespaces and Modules](http://qiita.com/murank/items/0be1978a3515fc76e7ba)
1. [Module Resolution](http://qiita.com/murank/items/5f11466474d49498bbd5)
1. [Declaration Merging](http://qiita.com/murank/items/ec90ba04edab1ea3718e)
1. [JSX](http://qiita.com/murank/items/90164aa9a3bed3c49a80)
1. [Decorators](https://qiita.com/murank/items/580e34883e0832ca7aed)
1. [Mixins](https://qiita.com/murank/items/e77ad8359ed1fd82822d)
1. [Triple-Slash Directives](https://qiita.com/murank/items/faff57883338ebdeda12)
1. [Type Checking JavaScript Files](https://qiita.com/murank/items/588eaddfe8af59914658)


# Enums
[原文](https://www.typescriptlang.org/docs/handbook/enums.html)

## Enums
Enum を使用すると名前付きの定数群を定義することができます。
TypeScript では数値ベースの enum と文字列ベースの enum の両方を提供しています。

### Numeric enums
まず数値 enum から見ていきますが、これは他の言語を使用していればなじみが深いでしょう。
enum は `enum` キーワードを使って宣言します。

```ts:TypeScript
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}
```
```js:JavaScript
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 1] = "Up";
    Direction[Direction["Down"] = 2] = "Down";
    Direction[Direction["Left"] = 3] = "Left";
    Direction[Direction["Right"] = 4] = "Right";
})(Direction || (Direction = {}));
```

上記の例は `Up` が `1` として初期化されている数値 enum となります。
他のメンバの値は自動的にインクリメントして定義されます。
つまり、`Direction.Up` は `1`、`Down` は `2`、`Left` は `3`、`Right` は `4` となります。

初期値を指定しないことも可能です。

```ts:TypeScript
enum Direction {
    Up,
    Down,
    Left,
    Right,
}
```
```js:JavaScript
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
```
この場合、`Up` は `0`、`Down` は `1`、といった具合に初期化されます。
この自動採番の仕組みは、同じ enum 内で値が一意である必要があるものの、値そのものは何でも良いような場合に役立ちます。

enum の使用方法は単純です。
メンバを使用する場合は単にプロパティのようにアクセスするだけで、型を宣言する場合は enum の名前を使用します。

```ts:TypeScript
enum Response {
    No = 0,
    Yes = 1,
}

function respond(recipient: string, message: Response): void {
    // ...
}

respond("Princess Caroline", Response.Yes)
```

数値 enum は [計算された値と定数](#computed-and-constant-members) を混在させることが可能です。
簡単に言うと、初期値を指定しないメンバは一番最初か、数値定数または他の定数 enum メンバで初期化されたメンバの後でしか宣言できません。
つまり、以下のように宣言することはできません。

```ts:TypeScript
enum E {
    A = getSomeValue(),
    B, // エラー! 'A' は定数で初期化されていないため、'B' には初期値が必要
}
```

### String enums
文字列 enum は数値 enum と似ていますが、少しだけ [実行時の振る舞いに違い](#enums-at-runtime) があります。
文字列 enum のメンバはすべて、文字列リテラルか、他のメンバで初期化する必要があります。

```ts:TypeScript
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
```
```js:JavaScript
var Direction;
(function (Direction) {
    Direction["Up"] = "UP";
    Direction["Down"] = "DOWN";
    Direction["Left"] = "LEFT";
    Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));
```

文字列 enum は自動採番の仕組みを持っていませんが、うまく "文字列化" できるというメリットがあります。
どういうことかと言うと、例えばデバッグ中に数値 enum の値を見ても意味のある情報は得られにくい (なので [逆マッピング](#enums-at-runtime) が役に立ちます) ですが、文字列 enum であれば、メンバの名前以外にわかりやすい情報が得られます。
>要は `0`、`1` より `UP`、`DOWN` の方が分かりやすいよね、ということ

### Heterogeneous enums
これが必要になることがあるとは思いませんが、enum は文字列と数値のメンバを混ぜて定義することも可能です。

```ts:TypeScript
enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}
```
```js:JavaScript
var BooleanLikeHeterogeneousEnum;
(function (BooleanLikeHeterogeneousEnum) {
    BooleanLikeHeterogeneousEnum[BooleanLikeHeterogeneousEnum["No"] = 0] = "No";
    BooleanLikeHeterogeneousEnum["Yes"] = "YES";
})(BooleanLikeHeterogeneousEnum || (BooleanLikeHeterogeneousEnum = {}));
```
ただし、JavaScript の実行時の振る舞いを活用するのでなければ、これを避けることをお勧めします。

### Computed and constant members
enum のメンバは *定数* または *計算された値* のいずれかの値を持ちます。
以下のいずれかに該当する場合、enum のメンバは定数とみなされます。

* 最初のメンバであり、かつ、初期値が指定されていない場合  
  この場合、値として `0` が設定されます。

```ts:TypeScript
// E.X は定数
enum E { X }
```

* 初期値が指定されておらず、かつ、前のメンバが *数値定数* の場合  
  この場合、前のメンバの値+1 が値として設定されます。

```ts:TypeScript
// 'E1'、'E2' のメンバはすべて定数

enum E1 { X, Y, Z }

enum E2 {
    A = 1, B, C
}
```

* 初期値が定数 enum 式の場合  
  定数 enum 式とはコンパイル時に評価可能な定数式のことで、以下のいずれかになります。
  - リテラル enum 式 (基本的には文字列リテラルまたは数値リテラル)
  - 定義済みの enum のメンバ (他の enum のメンバでも可)。  
  - 括弧で囲まれた定数 enum 式
  - 単項演算子 (`+`、 `-`、 `~`) が指定された定数 enum 式
  - 二項演算子 (`+`、 `-`、 `*`、 `/`、 `%`、 `<<`、 `>>`、 `>>>`、 `&`、 `|`、 `^`) を含む定数 enum 式  
    ただし、評価の結果が `NaN` または `Infinity` になる場合はコンパイルエラーになります。

上記のいずれにも該当しない場合、enum のメンバは計算された値とみなされます。


```ts:TypeScript
enum FileAccess {
    // 定数
    None,
    Read    = 1 << 1,
    Write   = 1 << 2,
    ReadWrite  = Read | Write,
    // 計算された値
    G = "123".length
}
```
```js:JavaScript
var FileAccess;
(function (FileAccess) {
    // 定数
    FileAccess[FileAccess["None"] = 0] = "None";
    FileAccess[FileAccess["Read"] = 2] = "Read";
    FileAccess[FileAccess["Write"] = 4] = "Write";
    FileAccess[FileAccess["ReadWrite"] = 6] = "ReadWrite";
    // 計算された値
    FileAccess[FileAccess["G"] = "123".length] = "G";
})(FileAccess || (FileAccess = {}));
```

### Union enums and enum member types
定数メンバの特殊版としてリテラルメンバがあります。
これは初期値を持たないか、値が初期値として指定されたメンバを指します。

* 文字列リテラル (例: `"foo"`, `"bar"`, `"baz"`)
* 数値リテラル (例: `1`, `100`)
* マイナス記号付きの数値リテラル (例: `-1`, `-100`)

すべてのメンバがリテラルメンバの場合、いくつかの特殊構文を使用できます。

ひとつ目の構文として、メンバを型としても使用できるようになります。

```ts:TypeScript
enum ShapeKind {
    Circle,
    Square,
}

interface Circle {
    kind: ShapeKind.Circle;
    radius: number;
}

interface Square {
    kind: ShapeKind.Square;
    sideLength: number;
}

let c: Circle = {
    kind: ShapeKind.Square,
    //    ~~~~~~~~~~~~~~~~ エラー!
    radius: 100,
}
```
```js:JavaScript
var ShapeKind;
(function (ShapeKind) {
    ShapeKind[ShapeKind["Circle"] = 0] = "Circle";
    ShapeKind[ShapeKind["Square"] = 1] = "Square";
})(ShapeKind || (ShapeKind = {}));
var c = {
    kind: ShapeKind.Square,
    //    ~~~~~~~~~~~~~~~~ エラー!
    radius: 100,
};
```

それ以外に、enum の型自身が各メンバの `共用型` になります。
[共用型](http://qiita.com/murank/items/bc1776efbecbd2120d94#union-types) についてはまだ説明していませんが、ここでは enum に存在する値の集合と考えてください。
これにより、値を比較する時に犯しがちなバグを防ぐことができます。

```ts:TypeScript
enum E {
    Foo,
    Bar,
}

function f(x: E) {
    if (x !== E.Foo || x !== E.Bar) {
        //             ~~~~~~~~~~~
        // エラー! 'E.Foo' と 'E.Bar' には '!==' を適用することはできない。
    }
}
```
この例では、最初に `x` が `E.Foo` で *ない* ことをチェックしています。
これが成り立つ場合、`||` が短絡評価されて if 文の中が実行されます。
逆に、この条件が成り立たなかった場合には `x` の値は `E.Foo` であるということです。
そのため、`x` が `E.Bar` と等しいかどうかの比較は意味をなさないということです。


### Enums at runtime
enum は実行時にも存在する、実オブジェクトです。
>interface と違ってちゃんと JavaScript のオブジェクトになるということね

つまり、以下のような enum は、

```ts:TypeScript
enum E {
    X, Y, Z
}
```

実際に次のように関数に渡すことができます。

```ts:TypeScript
function f(obj: { X: number }) {
    return obj.X;
}

// 'E' は数値型の 'X' プロパティを持つため、これは動作する。
f(E);
```

#### Reverse mappings
enum はメンバと同じ名前のプロパティを持つオブジェクトとして生成されるだけでなく、数値メンバについてはメンバの値からメンバ名を取得するための *逆マッピング* も生成されます。

```ts:TypeScript
enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
```
```js:JavaScript
var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"
```
生成されたコードでは enum は順方向 (`name` -> `value`) と逆方向 (`value` -> `name`) の両方のマッピングを持つオブジェクトにコンパイルされます。
enum への参照は常にプロパティ経由のアクセスとして出力され、インライン化されることはありません。

#### `const` enums
ほとんどのケースにおいて、enum は完璧な解決方法と言えます。
ただし、余分な生成コードや enum の値への間接的なアクセスのコストを払いたくないこともあるでしょう。
そのような場合には `const` enum を使用することができます。
定数 enum は enum に `const` 修飾子を付けることで定義します。

```ts:TypeScript
const enum Enum {
    A = 1,
    B = A * 2
}
```

定数 enum では定数 enum 式しか使用することができません。
また、通常の enum と違い、コンパイル時に完全に取り除かれます。
そして、定数 enum へのアクセスはインライン化されます。
これが計算された値を定数 enum の初期値にできない理由です。

```ts:TypeScript
const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]
```
```js:JavaScript
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
```

### Ambient enums
アンビエント enum は既存の enum の形式を宣言するために使用します。

```ts:TypeScript
declare enum Enum {
    A = 1,
    B,
    C = 2
}

console.log(Enum.A, Enum.B);
```
```js:JavaScript
console.log(Enum.A, Enum.B);
```
通常の enum であれば、初期値が指定されておらず、かつ、前のメンバが定数とみなされている場合にはそのメンバも定数とみなされるのに対し、アンビエント (かつ非定数) enum では初期値を持たないメンバは *常に* 計算された値とみなされます。
>イマイチ使い所が分からないけど、他のところで定義している enum にどんなメンバが存在するかを宣言するために使うイメージかな。
>あとは初期値を指定していないメンバの扱いの違いだけど、switch 文に使えるとかその辺りが変わってくるのかな?