[TypeScript]Recordについて、実際に実装して理解する。

TypeScriptの指定したキーを元に、Mapみたいな型を生成するRecordというものがある。
今回はこれを自力で実装しながらRecordについて理解することを目的とする。

Recordとは

Recordとは以下の書式を持つ組み込み型で、Kに指定したキーに対して、型Tを設定してくれるものです。

1
// Record<K extends string | number | symbol, T> Kに指定された型をキーにして,それぞれに対して、型Tを設定する。
2

3
type User = {
4
  id: number
5
  name: String
6
}
7

8
const Users: Record<1 | 2, User> = {
9
  1: {
10
    id: 1,
11
    name: 'user1',
12
  },
13
  2: {
14
    id: 2,
15
    name: 'user2',
16
  },
17
}

今回はこれを実装して理解していきます。
すなわち以下のMyRecordを実装していきます。

1
type User = {
2
  id: number
3
  name: String
4
}
5

6
const Users: MyRecord<1 | 2, User> = {
7
  1: {
8
    id: 1,
9
    name: 'user1',
10
  },
11
  2: {
12
    id: 2,
13
    name: 'user2',
14
  },
15
}

MyRecordの実装方針

MyRecordを実装するにあたって、以下の方針で段階を踏んで実装していきます。

1. MyRecord<K extends string | number | symbol, T>のKで指定されたプロパティのキーを羅列する
2. それぞれのキーに対して、Tの型を設定する

では順に見ていきましょう

MyRecord<K extends string | number | symbol, T>に指定されたキーを羅列する

これはMapped Typesを使えば簡単に羅列できます。

1
type MyRecord<K extends string | number, T> = {
2
  [P in K]: any
3
}

上記の[P in K]については見慣れない人も多いかもしれませんが、これだけで、Kに指定されたキーの全てをPとして羅列することが可能です。
それぞれに対して、anyを設定していますので、これをTに変換するだけで出来そうですね。

それぞれのプロパティのキーに対して、Tの型を設定する。

これは先程の例に対してTを指定するだけなので、以下のとおりとすることで可能です。

1
type MyRecord<K extends string | number, T> = {
2
  [P in K]: T
3
}

まとめ

今回はRecordの実装を順を追って実装していきました。
理解出来ましたでしょうか？
Mapped Typesの概念は理解するまでとっつきにくいので、慣れるまで繰り返し使うしか無いですね！

今回のように、少しむずかしい問題に遭遇したら内容を分解して順序立てて理解していくと良いです。