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


こんにちは茶木です。

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

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

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

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

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

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

colorstypeof で型に変換ができます。 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の本領発揮ですが、文字列リテラルのユニオン型はそのとっかかりになりそうですね。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Chaki Hironori

webライターもやってるフロントエンドエンジニアです。Reactは自信があります。またデザイン畑の出身で、気持ちのいいアニメーションやインタラクティブな表現は丁寧に手掛けます。好きなものは中南米の遺跡で、スペイン語が少しできます。