【TypeScript】Utility TypesのRecordを理解する

この記事は何？

この記事は、Utility Typesの一つであるRecordについて理解する記事です。
Utility Typesってそもそも何？という型（方）は以下の記事を御覧ください🙇🏻
👉 TypeScriptのUtility Typesを理解して活用する

そもそも、TypeScriptって何？って型は以下を御覧ください
👉 JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~

Record＜Keys,Type＞とは

TypeScript公式には以下のように書かれています。

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.
プロパティキーがKeysで、プロパティ値がTypeであるオブジェクトタイプを構築します。 このユーティリティを使用して、あるタイプのプロパティを別のタイプにマップできます。
https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype

イマイチわかりずらいですね🤔

要約すると、Recordは2つの型（Keys, Type）を利用して、新たなオブジェクトを作成します。
KeysにはオブジェクトのKeyとなる型を、TypeにはKeyに対するプロパティとなるような型を設定します。

実際にコードの場合、以下のように表すことが出来ます。

type hogehoge = Record<Keyとなる型, プロパティのなる型>

// MyFriends型を定義。この型がキーとなる
type MyFriendName = "TOM" | "EMMA" | "KEN";

// ふつーにHuman型を定義。この型がプロパティとなる。
interface Human {
  sex: "woman" | "man";
  old: number;
  height: number;
}

// 上の方を組み合わせる！
type MyFriends = Record<MyFriendName, Human>;

// MyFriendNameがキーに、Humanがプロパティとなる
const facebookList: MyFriends = {
  TOM: {sex: "man", old: 14, height: 150},
  EMMA: {sex: "woman", old: 13, height: 149},
  KEN: {sex: "man", old: 12, height: 148},
}

このように、既存の型を組合わせてオブジェクトの型を作成することが出来ます。
Recordを使えば、様々なオブジェクトの型を簡単に作成できそうです。

Reactで使う際は以下のように利用できそうです。

hogehoge.tsx

import { Fuga } './fugafuga.ts'
import { Gahu } './gahugahu.ts'

type Props = Record<Fuga, Fahu>;

const hogehogeComponent: React.FC<Props> = props => {
 ...
}

以上になります。

おわりに

今回は、Utility TypesのRecordについて紹介しました。
是非、ご活用ください！

参考

• https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype