TypeScript入門第9回

TypeScriptのEnumとLiteral型をわかりやすく解説

TypeScriptでは、決まった値だけを扱いたい場合があります。

例えば

ステータス
ユーザー権限
APIレスポンス状態

などです。

そのような場合に使われるのが

Enum
Literal型

Enum
Literal型

です。

この記事では

Enumとは
Literal型とは
それぞれの違い
実務での使い方

を解説します。

Enumとは？

Enumは

列挙型

列挙型

と呼ばれる型です。

決まった値の集合を定義することができます。

例

enum Status {
  Success,
  Error,
  Loading
}

enum Status {
  Success,
  Error,
  Loading
}

使用例

let status: Status = Status.Success

let status: Status = Status.Success

内部的には

Success = 0
Error = 1
Loading = 2

Success = 0
Error = 1
Loading = 2

のような数値になります。

String Enum

文字列を使うこともできます。

enum Status {
  Success = "success",
  Error = "error",
  Loading = "loading"
}

enum Status {
  Success = "success",
  Error = "error",
  Loading = "loading"
}

こちらの方が、実務ではよく使われます。

理由

可読性が高い

可読性が高い

からです。

Literal型とは？

Literal型とは

特定の値だけを許可する型

特定の値だけを許可する型

です。

例

type Status = "success" | "error" | "loading"

type Status = "success" | "error" | "loading"

使用例

let status: Status = "success"

let status: Status = "success"

もし

status = "done"

status = "done"

と書くと

エラー

エラー

になります。

EnumとLiteral型の違い

主な違いはこちらです。

特徴	Enum	Literal型
値の集合	〇	〇
実行時オブジェクト	〇	×
軽量	△	〇
Union型	×	〇

Literal型のメリット

最近のTypeScriptでは、Literal型がよく使われます。

type Role = "admin" | "user" | "guest"

type Role = "admin" | "user" | "guest"

理由

シンプル
軽量
JavaScriptに近い

ためです。

実務でよくある例

APIレスポンスです。

type ApiStatus = "success" | "error"

type ApiStatus = "success" | "error"

type Response = {
  status: ApiStatus
  data?: string
  message?: string
}

type Response = {
  status: ApiStatus
  data?: string
  message?: string
}

使用例

if (res.status === "success") {
  console.log(res.data)
}

if (res.status === "success") {
  console.log(res.data)
}

const assertion

Literal型を作るテクニックです。

const roles = ["admin","user","guest"] as const

const roles = ["admin","user","guest"] as const

型

readonly ["admin","user","guest"]

readonly ["admin","user","guest"]

これを使うと

type Role = typeof roles[number]

type Role = typeof roles[number]

のように型を作れます。

Enumはいつ使う？

Enumは次のような場合です。

C#風の設計
大規模プロジェクト
明確な定数管理

例

enum Role {
  Admin,
  User
}

enum Role {
  Admin,
  User
}

Literal型はいつ使う？

最近はこちらが主流です。

type Role = "admin" | "user"

type Role = "admin" | "user"

理由

軽量でシンプル

軽量でシンプル

だからです。

まとめ

EnumとLiteral型は

どちらも

決まった値を扱う型

決まった値を扱う型

です。

違い

型	特徴
Enum	列挙型
Literal型	Union型

最近のTypeScriptでは

Literal型を使うケースが増えています

Literal型を使うケースが増えています

次回は、TypeScriptのReadonlyとImmutable設計