Что делает и для чего нужен Record<> в TypeScript?

[kirilljsx]

Давайте разбираться Record<Keys, Type> - это встроенный utility type в TypeScript, который создает объектный тип-словарь с фиксированным типом ключей и фиксированным типом значений.

Для не понимающих:

Record<ТипКлюча, ТипЗначения>

Объекты все помнят? Ключ -> значение.

Под капотом конечно страшненький отображаемый тип:

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

Ладно, теперь давай разберем далее несколько примеров, с простой типизацией и с типизацией более боевой что используется в реальных проектах.

Базовое использование:

const scores: Record<string, number> = {
  alex: 3,
  max: 8,
  kate: 5,
};

Обратим внимание на сие простой объект с использованием Record<> теперь картина стала понятнее? У нас есть объект как всегда ключ -> значение, а Record сразу добавляет к ним типизацию.

Более приемлемый вариант

Представим что у нас есть где-то типы, пусть будут как всегда User, то тогда наш объект должен выглядеть так:

type User = {
  name: string;
  age: number;
}
export type { User }

Как обычно типы экспортируем

Далее их импортируем, и вот смотрите как красиво получается типизировать наш объект через Record

import type { User } from "@/types"

const scores: Record<string, User> = {
  user1: { name: 'Alex', age: 30 },
  user2: { name: 'Max',  age: 25 },
  user3: { name: 'Kate', age: 28 },
}

А без Record можно?

А то, конечно можно, но вопрос надо ли оно нам?
Вот пару способов:

// 1. Индексная сигнатура - ну классика
const scores: { [key: string]: number } = {
  alex: 3,
  max: 8,
  kate: 5,
};

// 2. Через interface
interface Scores {
  [key: string]: number;
}
const scores: Scores = {
  alex: 3,
  max: 8,
  kate: 5,
};

Думаю у многих будет один и тот же вопрос, а моги я сделать так:

interface Scores {
  name: number;
}

const scores: Scores = {
  name: 42, // Если тут будет name, а не alex - то сработает
  max: 3,
  kate: 8,
};

Нет, не можете - потому что name: number описывает конкретное поле с именем name. TypeScript не разрешит добавить max или kate, так как их нет в интерфейсе. Для динамических ключей нужна индексная сигнатура [key: string].

По сути Record - это короткая запись для индексной сигнатуры. Квадратные скобки [key: string] говорят TS: “Эй мужик, ключи могут быть любыми строками”, а тип после двоеточия задает тип значений. Record<string, number> - это то же самое что { [key: string]: number }, только читается лучше и легче.

Главное разобраться в самом начале - потом уже будете использовать по наитию.