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

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

© 2018 kk-web