TypeScript オブジェクトのキーと値の型を生成する方法

やりたいこと

TypeScript でオブジェクトのキーと値の型をそれぞれ生成したい

オブジェクトのキーの型を生成する方法

結論、keyof と typeof の組み合わせで実現可能

const FONT_WEIGHT = {
  BOLD: 600,
  NORMAL: 300,
} as const

type FontWeightKeyType = keyof typeof FONT_WEIGHT
// 型推論結果 : type FontWeightKeyType = "BOLD" | "NORMAL"

TypeScript Playground で実際に試した結果

オブジェクトの値の型を生成する方法

結論、keyof と typeof の組み合わせで実現可能

const FONT_WEIGHT = {
  BOLD: 600,
  NORMAL: 300,
} as const

type FontWeightValueType = typeof FONT_WEIGHT[keyof typeof FONT_WEIGHT]
// 型推論結果 : type FontWeightValueType = 600 | 300

TypeScript Playground で実際に試した結果

おまけに

ちなみにオブジェクトの値を取り出す便利な型を生成する
Custom Utility Type は以下のように型を定義すればOK。

ValueOf.ts

/** `Object`から`value`を取り出した`Union Types` */
export type ValueOf<T extends object> = T[keyof T]

使用方法

import { ValueOf } from "./ValueOf"

export const FONT_WEIGHT = {
  BOLD: 600,
  NORMAL: 300,
} as const

type FontWeightValueType = ValueOf<typeof FONT_WEIGHT>
// 型推論結果 : type FontWeightValueType = 600 | 300