keyof typeofでオブジェクトからキーだけを抜き出して型を生成する

6273 ワード
JavaScript TypeScript フロントエンド tech テキストリンク

この記事のゴール

こういうオブジェクトがあって、

const sampleObject = {
  a: 111,
  b: 222,
  c: 333,
  d: 444,
  e: 555,
}

ここからキーだけ抜き出して型を生成することがゴール（記事タイトルのまま）。

type SampleType = "a" | "b" | "c" | "d" | "e";

書き方

結論から先に。
この書き方をすればsampleObjectからキーだけを抜き出してSampleTypeの型定義ができます。

type SampleType = keyof typeof sampleObject;

もうちょっとだけ詳しく

2段階に分けて理解していきます。カンタンだけどね。

typeof時点での型

keyof typeofって、見たとおりtypeofしたものを、さらにkeyofしてます。
じゃあtypeofした時点で型はどうなっているのか、見てみましょう。

const sampleObject = {
  a: 111,
  b: 222,
  c: 333,
  d: 444,
  e: 555,
}

type SampleType = typeof sampleObject;

typeofした時点での型は以下の通り。
キーと値の両方がくっついてますね。

type SampleType = {
    a: number;
    b: number;
    c: number;
    d: number;
    e: number;
}

そしてkeyofの型

今回は値は必要ないので、キーだけを抜き出します。
ここでkeyofを使うわけです。

const sampleObject = {
  a: 111,
  b: 222,
  c: 333,
  d: 444,
  e: 555,
}

type SampleType = keyof typeof sampleObject;

type SampleType = "a" | "b" | "c" | "d" | "e"

これでオブジェクトからキーだけを抜き出した型の定義ができました。

IIJ Machinist ことはじめ
とりあえずVitestを使えばテストは早くなるのか?