C# の enum 感覚で詰まる TypeScript の enum（数値 / 文字列 / const / union の違い）

みなさんこんにちは！ヒロポンです！

「来月からフロントも TypeScript でお願い」。

業務系一筋でやってきた身に、これがいきなり降ってくると地味に身構えますよね。

私も最初、C# の enum のノリで TypeScript の enum を書きました。で、生成された JavaScript を見て「あれ？？なんかオブジェクトができてる」と固まった。

この記事は、TypeScript enum C# の感覚のズレで詰まる人向けです。C# の enum を基準に、TS の数値 enum・文字列 enum・const enum・union 型リテラルがそれぞれ何に対応するのか、対応マップと実コードで整理していきます。

先に言っておくと、C# の知識はムダになりません。「C# のあれが TS だとこれ」という対応さえ掴めば、TS の enum 周りはだいたい読めるようになります。

C# の enum のつもりで書くと「あれ？」となる場面

C# の enum は、コンパイル時に確定する整数の名前付き定数。実行時に何かオブジェクトが生えたりはしません。

ところが TS の数値 enum を書いて、出力された JS を見ると。

オブジェクトが1個できています。しかも値から名前を逆引きできる。

C# 脳だと「なんでランタイムに実体があるんだ？？」となる。ここが最初の段差です。

私はこれを知らずに、enum を大量に定義したモジュールのバンドルサイズを見て「意外と重いな」と首をひねったことがあります。原因は、enum が実行時オブジェクトとして全部バンドルに乗っていたから。

まずは全体像を対応マップで掴みます。

C# enum ↔ TypeScript の対応マップ

C# の enum が、TS の4つの表現にどう対応するか。並べてみます。

ざっくり言うと、C# の enum の代わりに TS でまず考えるのは union 型です。

実行時オブジェクトを作らないぶん軽くて、型安全も C# の enum と同じくらい効きます。

逆引きや文字列表現が要る時だけ enum を使う。このくらいの温度感が、現場では扱いやすい。

順番に対応を見ていきます。

対応1: C# の数値 enum ↔ TS の数値 enum

C# の素直な enum は、TS でもそのまま数値 enum で書けます。見た目はほぼ同じ。

// C# の enum Status { Todo, Doing, Done } に相当
enum Status {
  Todo,   // 0
  Doing,  // 1
  Done,   // 2
}

console.log(Status.Todo);   // 0
console.log(Status[0]);     // "Todo" ← 値から名前を逆引きできる

実行結果:

Status.Todo が 0 なのは C# と同じ。

でも Status[0] で "Todo" が返るのは、C# に無い挙動です。TS の数値 enum は、実行時にこんな感じの双方向オブジェクトを生成しているから。

// 上の enum が生成する JS のイメージ
var Status = {
  "0": "Todo", "1": "Doing", "2": "Done",
  Todo: 0, Doing: 1, Done: 2,
};

逆引きが要る場面ではこれが効きます。数値で DB に保存した値を、画面に名前で出す、みたいなやつ。

逆に、要らないなら。この実体はただの重りになります。

対応2: C# の文字列運用 ↔ TS の文字列 enum / union 型

C# で「区分を文字列で持ちたい」時、enum を ToString() したり、定数文字列を並べたりしますよね。

TS だと選択肢が2つあります。

// (A) 文字列 enum：実行時オブジェクトは作るが、逆引きは無い
enum Color {
  Red = "RED",
  Green = "GREEN",
}
console.log(Color.Red);   // "RED"

// (B) union 型リテラル：実行時オブジェクトを作らない
type Size = "S" | "M" | "L";
const picked: Size = "M";   // "S" | "M" | "L" 以外はコンパイルエラー

実行結果（文字列 enum の値と、union 型の代入）:

(B) の union 型が、TS だと一番出番が多い書き方です。

type Size = "S" | "M" | "L" と書くだけ。C# の enum と同じく「決まった値しか入らない」型安全が、いい感じに得られます。しかも実行時に何も生成しないので軽い。

「文字列 enum と union、どっちにするか？？」で迷ったら、実行時にオブジェクトが要るかどうかで決めると楽です。要らなければ union。

対応3: C# の [Flags] ↔ TS は自前でビット演算

ここが一番ハマるところ。C# の [Flags] 属性に相当する仕組みは、TS の enum にはありません。

// [Flags] は無いので、数値 enum + ビット演算で自前で組む
enum Permission {
  None  = 0,
  Read  = 1 << 0,  // 1
  Write = 1 << 1,  // 2
  Admin = 1 << 2,  // 4
}

const p = Permission.Read | Permission.Write;          // 3
const canWrite = (p & Permission.Write) === Permission.Write;  // true
console.log(p, canWrite);   // 3 true