言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

TypeScript辞典

  1. トップページ
  2. TypeScript辞典
  3. Record<K, V>

Record<K, V>

対応: TypeScript 2.1(2016)

キーの型と値の型を指定してオブジェクト型を作るユーティリティ型です。辞書(ディクショナリ)のように、特定の型のキーに特定の型の値を対応づけるオブジェクトを表現するのに適しています。

構文

// Record<K, V>: キーの型KとバリューはV型のオブジェクト型を作ります。
type 型名 = Record<キーの型, 値の型>;

// よく使われる例
type 型名 = Record<string, number>; // 任意の文字列キーに数値
type 型名 = Record<"a" | "b" | "c", 型>; // 特定のキーに型を対応させます。

構文一覧

概要
Record<string, V>任意の文字列キーに型Vの値を持つオブジェクト型です。インデックスシグネチャ{ [key: string]: V }と同等です。
Record<K, V>(Kがユニオン型)ユニオン型Kの各メンバーをキーとして持つオブジェクト型です。すべてのキーの存在が強制されます。
Record<keyof T, V>型TのキーをそのままRecordのキーとして使います。
Partial<Record<K, V>>すべてのキーをオプショナルにしたRecord型です。一部のキーだけ存在する場合に使います。

サンプルコード

// Record<string, number>: 文字列キーに数値を持つオブジェクト
type ScoreMap = Record<string, number>;
const scores: ScoreMap = {
	okabe: 85,
	kurisu: 92,
	mayuri: 78,
};
scores["daru"] = 90; // 新しいキーも追加できます。
console.log(scores["okabe"]); // 85と出力されます。

// ユニオン型のキー: 必要なキーをすべて持つことが強制されます。
type Day = "Mon" | "Tue" | "Wed" | "Thu" | "Fri";
type WorkSchedule = Record<Day, string>;

const schedule: WorkSchedule = {
	Mon: "開発",
	Tue: "ミーティング",
	Wed: "開発",
	Thu: "レビュー",
	Fri: "リリース",
	// いずれかのキーが欠けるとエラーになります。
};
console.log(schedule.Mon); // 『開発』と出力されます。

// 値が複雑なオブジェクトのRecord
interface Category {
	label: string;
	color: string;
	count: number;
}
type CategoryId = "html" | "css" | "javascript" | "typescript";
type CategoryMap = Record<CategoryId, Category>;

const categories: CategoryMap = {
	html: { label: "HTML", color: "#e34c26", count: 42 },
	css: { label: "CSS", color: "#264de4", count: 38 },
	javascript: { label: "JavaScript", color: "#f7df1e", count: 73 },
	typescript: { label: "TypeScript", color: "#3178c6", count: 23 },
};
console.log(categories.typescript.label); // 『TypeScript』と出力されます。

// Partial: 一部のキーだけ存在できます。
type OptionalSchedule = Partial;
const partialSchedule: OptionalSchedule = {
	Mon: "開発",
	Wed: "ミーティング",
	// 他の曜日は省略できます。
};
console.log(partialSchedule.Tue); // undefinedと出力されます。

// Record vs インデックスシグネチャ
// 以下の2つは同等です。
type ByString1 = Record<string, number>;
type ByString2 = { [key: string]: number };

// Recordを使った関数の例: 文字の出現回数を数えます。
function countChars(str: string): Record<string, number> {
	const result: Record<string, number> = {};
	for (const char of str) {
		result[char] = (result[char] ?? 0) + 1;
	}
	return result;
}
const charCount = countChars("TypeScript");
console.log(charCount["t"]); // 1と出力されます(大文字の"T"と小文字の"t"はそれぞれ別にカウントされます)。

実行すると次のように出力されます。

npx ts-node ts_record.ts
85
開発
TypeScript
undefined
1

概要

『Record<K, V>』はキーの型を`K`、値の型を`V`として指定したオブジェクト型を生成するユーティリティ型です。内部実装は`{ [P in K]: V }`というマップ型です。

`Record`はインデックスシグネチャ`{ [key: string]: V }`と同等ですが、`Record`の方が読みやすく意図が明確です。ユニオン型(例: `"Mon" | "Tue" | ...`)をキーとして使うと、列挙したすべてのキーが必ず存在することが保証されるため、データのマッピングが安全になります。

一部のキーだけ存在できるようにしたい場合は`Partial>`と組み合わせます。また、RecordとPick/OmitPartial/Requiredを組み合わせることで、さまざまな要件に応じたオブジェクト型を柔軟に作れます。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。