TypeScript の Record の使い方

2020-08-01

TypeScript の Handbook には以下の Utility Types が書かれています。

Partial
Readonly
Record
Pick
Omit
Exclude
Extract
NonNullable
Parameters
ConstructorParameters
ReturnType
InstanceType
Required
ThisParameterType
OmitThisParameter
ThisType

で、そのうち自分が未だに理解できていないのが以下の通りでして。

Record
ConstructorParameters
InstanceType
ThisParameterType
OmitThisParameter
ThisType

このうち最低でも Record はしっかりと仕様を覚えないとマズいよなぁと思いつつ数年、どうやって使うのが効果的なのかわからないままでした。

で、さっきコーディングをしていて、ふと突然 Record の使い方の一つが理解できたので備忘録がてら。

まず、今まで書いていたコードがこれです。

export type SetSitePayload = {
  [key in
    | "ajinomoto"
    | "cookpad"
    | "delishkitchen"
    | "erecipe"
    | "kikkoman"
    | "kurashiru"
    | "lettuceclub"
    | "nadia"
    | "orangepage"
    | "rakuten"
    | "sirogohan"]: boolean;
};

きったねーですね、自分も書いていて『もう少しなんとかならんのか』と思っていました。

対して Record を使った場合がこんな感じです。

type Site =
  | "ajinomoto"
  | "cookpad"
  | "delishkitchen"
  | "erecipe"
  | "kikkoman"
  | "kurashiru"
  | "lettuceclub"
  | "nadia"
  | "orangepage"
  | "rakuten"
  | "sirogohan";

export type SetSitePayload = Record<Site, boolean>;

めっちゃ綺麗ですね、すごく良い感じです。

ということで Record の使いみちとしては、オブジェクトの value が定まっており、その value を複数の key に紐付ける場合に効果を発揮する、という認識になりました。

なかなか使いみちが難しそうな感じを受けますが、どうなんでしょうか。