shiki0331’s blog

Web Developer. TypeScript / React.js を中心に学んでいます。 ブログ内容で間違っている箇所などありましたら、ご指摘していただけると助かります。

TypeScriptにおける Record 型の実装を理解する

TypeScriptのRecord型とは?

まず、TypeScriptのRecord機能について説明します。

Record型の説明は以下のURLで確認できます: https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type

Record型は、2つの型を受け入れることで、ある型を別の型にマッピングします。

以下が例です:

type RGBColors = Record<'red' | 'green' | 'blue', number>;

ここで、Record型は、number型(第2引数)を "red"、"green"、"blue"(第1引数)のユニオンにマッピングします。

その結果、次のようになります:

type RGBColors = {
"red": number;
"green": number;
"blue": number;
}

TypeScript の Record 型の実装を理解する

以下のURLでRecord型の実装を確認することができます: https://github.com/microsoft/TypeScript/blob/5d8ef4bdcb8bdbd4307c74a07b01e3bdf6e04b6a/lib/lib.es5.d.ts#L1590

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

Record型は2つの引数を受け取ります:

最初の引数は K extends keyof any で、これは "string" | "number" | "symbol" に対応する。したがって、第一引数は "string" | "number" | "symbol" 型です。 第2引数のTはすべての型を受け入れることができます。

では、Record型の中を見てみましょう。 key は [P in K] です。in キーワードは、KをループしてPとしてマッピングするために使われます。

例えば、K"red"、"green"、"blue"のとき、[P in K]"red"、"green"、"blue"のkeyを生成する。

先ほどのRGBColors型を再確認してみましょう:

type RGBColors = Record<'red' | 'green' | 'blue', number>;

// これは、上記のRGBColorsと同等です。
type RGBColors = {
"red": number;
"green": number;
"blue": number;
}

TypeScriptのRecord型についての理解が深まれば幸いです。

英文:

dev.to