Что такое Records?

Records в TypeScript

Records — это встроенный утилитарный тип TypeScript, который создаёт объект с определённым набором ключей и типом значений. Это мощный инструмент для создания типов с предсказуемой структурой.

Синтаксис и базовый пример

type Record<K extends string | number | symbol, T> = {
  [P in K]: T;
}

Практический пример:

type Profession = "frontend" | "backend" | "devops";
type ProfessionLevel = Record<Profession, number>;

const levels: ProfessionLevel = {
  frontend: 5,
  backend: 3,
  devops: 2
};

В этом примере Record<Profession, number> создаёт тип объекта, где:

• Ключи — только значения из типа Profession ("frontend", "backend", "devops")
• Значения — числа

Основные преимущества

1. Типобезопасность — компилятор гарантирует, что все требуемые ключи присутствуют
2. Автодополнение — IDE подсказывает доступные ключи
3. Рефакторинг — при изменении типа ключей все ошибки станут видны
4. Краткость — вместо повторения типов значений несколько раз

Примеры использования

1. Маппинг статусов с описаниями

type OrderStatus = "pending" | "processing" | "completed" | "cancelled";

const statusMessages: Record<OrderStatus, string> = {
  pending: "Заказ ожидает обработки",
  processing: "Заказ обрабатывается",
  completed: "Заказ завершён",
  cancelled: "Заказ отменён"
};

2. Кэш результатов по ID

type UserId = "user1" | "user2" | "user3";

const userCache: Record<UserId, User> = {
  user1: { id: "user1", name: "Алиса" },
  user2: { id: "user2", name: "Боб" },
  user3: { id: "user3", name: "Виктор" }
};

3. Конфигурация для разных окружений

type Environment = "development" | "staging" | "production";

interface Config {
  apiUrl: string;
  debug: boolean;
  timeout: number;
}

const configs: Record<Environment, Config> = {
  development: {
    apiUrl: "http://localhost:3000",
    debug: true,
    timeout: 5000
  },
  staging: {
    apiUrl: "https://staging.example.com",
    debug: false,
    timeout: 10000
  },
  production: {
    apiUrl: "https://api.example.com",
    debug: false,
    timeout: 30000
  }
};

Record vs обычный объект

Без Record (не типобезопасно):

const status: any = {
  pending: "Ожидает"
  // Забыли другие статусы, но ошибки нет
};

С Record (типобезопасно):

type Status = "pending" | "completed";
const status: Record<Status, string> = {
  pending: "Ожидает"
  // Ошибка: свойство "completed" отсутствует
};

Работа с динамическими ключами

Если ключи заранее неизвестны, используйте Record<string, T>:

type StringRecord = Record<string, any>;

const dynamicObject: StringRecord = {
  anyKey: "любое значение",
  anotherKey: 123
};

Но это теряет типобезопасность. Лучше использовать Map или явно типизировать известные ключи.

Record с числовыми индексами

type ArrayIndices = 0 | 1 | 2;
const tupleData: Record<ArrayIndices, string> = {
  0: "первый",
  1: "второй",
  2: "третий"
};

Практическое применение во фронтенде

// Маппинг иконок по типам
type IconType = "success" | "error" | "warning" | "info";

const iconComponents: Record<IconType, React.ComponentType> = {
  success: SuccessIcon,
  error: ErrorIcon,
  warning: WarningIcon,
  info: InfoIcon
};

// Использование
const icon = iconComponents[type];

Отличие от других подходов

• Record — для известного набора ключей
• Map — для динамических ключей и сложной логики
• Enum — для именованных констант с дополнительными возможностями
• Interface — для描述объектной структуры с методами

Records — это простой и эффективный способ создавать типобезопасные объекты с предсказуемой структурой, что особенно полезно при работе с конфигурациями, маппингами и кэшами в React-приложениях.