TypeScript なんとなく使ってた 文字列リテラルのユニオン型を理解する

こんにちは茶木です。

個別の機能としてはなんとなくわかっているけれど、そのエッセンスを十分に理解してなかった文字列リテラルのユニオン型のテクニックを理解しようという趣旨です。

文字列リテラルのユニオン型とは

type BrakePoint = "sp" | "tablet" | "pc"

ユニオン型は string 型 や number 型 と違って、 | で区切った、値そのものだけが許可される型です。

ユニオン型は、数値や true や false も指定できますが、ここでは文字列リテラルのみで構成されるユニオン型について述べます。他の言語の「列挙型」みたいなものです。

keyof typeof でマップから文字列リテラルのユニオン型を作る

文字列リテラルのユニオン型のコアは、 static な map の indexを作るのに便利 ということになると思うんですが、その表現、まったくピンと来ないので例を挙げます。

const colors = {
 primary: "#efdd08",
 secondary: "#ef08dd",
 success: "#38ffc8",
 warning: "#f8f838",
 error: "#f83800",
 disabled: "#eee",
}

type ColorName = keyof typeof colors;

ここではカラーテーブルを例に取りました。 よくあるキーと値のマップになります。

typeof

colors は typeof で型に変換ができます。 typeof colors は以下と同等になります。

type Colors = {
 primary: string;
 secondary: string;
 success: string;
 warning: string;
 error: string;
 disabled: string;
}

keyof

keyof は オブジェクトのプロパティ名を文字列リテラルのユニオン型に変えます。

要するに、ColorName には、"primary" | "secondary" | "success" | "warning" | "error" | "disabled" になります。

踏まえて

interface BadgeProps {
  count: number,
  color: ColorName,
}

文字列リテラルのユニオン型によって、colors にあるキー名だけを指定できます。これ以外の色を利用しようとすると typescript error が発生するのでわかりやすいですね。カラーテーブル以外にも、アイコンのリスト、フォントサイズなど使えるケースがあります。

応用 [key in X]

文字列リテラルのユニオン型を元に、型をつくります。ちょうど keyof typeof の逆に近い動作になります。

const type Role = "viewer" | "editor" | "admin";

type RoleMap = {
  [key in Role]: {
    name: string;
    editable: boolean;
    deletable: boolean;
  };
}

const roles: RoleMap = {
  viewer: {
    name: "閲覧者",
    editable: false,
    deletable: false,
  },
  editor: {
    name: "編集者",
    editable: true,
    deletable: false,
  },
  admin: {
    name: "管理者",
    editable: true,
    deletable: true,
  },
}

文字列リテラルのユニオン型の Role を元にしたキーと、それに、 name, editable, deletable をメンバーに持った型を指定しています。

ある型から派生した型を自由自在に作れるようになるとtypescriptの本領発揮ですが、文字列リテラルのユニオン型はそのとっかかりになりそうですね。