← BLOG

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 に紐付ける場合に効果を発揮する、という認識になりました。

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

← BLOG