TypescriptのMapped Typesの使い所がようやく分かった話

フロントエンドエンジニアとして就職して1年半。最初はあんなに意味不明だったTypescriptも、かなり自分の中で理解が深まったかと思います。
最初は、分からない型はたまにanyで逃げてましたが、今はinterfaceやgenericsあたりの普遍的な機能は問題なく読み書きできます。
(もっとも、ライブラリのソースコードで、Conditional Typesやinferがふんだんに使われているものを見ると、ちょおおっ…となりますが汗)

そんな私、つい最近になってMapped Typesの使い所がわかったので共有します。
(最初に学んだ際には、この型の何がいいんだろ？と疑問でした)

結論から申しますと、1人のユーザーが複数のアカウントを持つサービスの実装に際して役に立ちました

before-map.ts

type User = {
 account1: {
  name: string,
  email: string,
  address: string
  ....
  },
 account2: {
  name: string,
  email: string,
  address:string
  ....
  },
  account3: {
  .....account5まで続く
}

上記のように、accout1からaccount5まで同じ内容のオブジェクトとなる際に、Mapped Typesを使う事で共通化しタイポを防げる & プロパティ名の変更に強くなれる事に気づきました。

after-map.ts

type Account = {
  name: string,
  email: string,
  address: string,
   ....
}

type AccountKey = "account1" | "account2" | "account3" | "account4" | "account5";

type User = {
 [P in AccountKey]: Account
}

かなりスマートにまとまりました！

今回は、「1人のユーザーが複数のアカウントを持っている時」というユースケースでしたが、例えば「1人のユーザーが複数の住所を持っている場合(ECサイト等？)」に扱えるのではと思います。

最初に学んだ時には「このMapped Types、使い道あるのかな？」と思ってしまいました。
しかし、実践と理論を繰り返す中で初めて見える知見というものがあると痛感しました。
偉大なる先人が考案して教科書に載っているようなものには全て、それ相応の理由があるのですね。