Що робить Record<K, T>?

TypeScriptJunior~1 хв читання

1. Що робить `Record<K, T>`

Record<K, T> створює тип об'єкта, у якого ключі мають тип K, а значення - тип T.

Синтаксис

javascript

Record<Тип_ключів, Тип_значень>

Приклад

javascript

type Roles = Record<string, number>;

const userRoles: Roles = {
  admin: 1,
  user: 2,
  guest: 3,
};

Тут:

усі ключі - string;

усі значення - number.

2. Приклад з конкретними ключами

javascript

type Status = 'pending' | 'success' | 'error';

type StatusMessages = Record<Status, string>;

const messages: StatusMessages = {
  pending: 'Завантаження...',
  success: 'Готово',
  error: 'Помилка',
};

TypeScript строго перевіряє наявність усіх ключів (pending, success, error) і тип їхніх значень (string).

3. Як `Record<K, T>` влаштований усередині

javascript

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

Розшифровка:

K - множина допустимих ключів (string | number | symbol);
T - тип значень;
[P in K] - створює об'єкт із властивостями P з множини K;
: T - вказує, що кожна властивість має тип T.

4. Використання з `union`-типами

Record автоматично розгортає всі варіанти K як ключі.

javascript

type Page = 'home' | 'about' | 'contact';

type PageInfo = Record<Page, { title: string }>;

const pages: PageInfo = {
  home: { title: 'Home' },
  about: { title: 'About' },
  contact: { title: 'Contact' },
};

TypeScript перевірить, що ти не пропустив жодну сторінку і не додав зайву.

5. Порівняння `Record` і звичайного об'єкта

Особливість	Звичайний об'єкт	`Record<K, T>`
Типізація ключів	нестрога	строга (через union)
Перевірка всіх полів	немає	є
Зручність для словників	середня	ідеальна
Підтримка автодоповнення	обмежена	повна

6. Практичні приклади

Приклад 1. Карта налаштувань

javascript

type SettingKey = 'theme' | 'language' | 'timezone';

type Settings = Record<SettingKey, string>;

const settings: Settings = {
  theme: 'dark',
  language: 'uk',
  timezone: 'Europe/Kyiv',
};

Приклад 2. Лічильник за id

javascript

const scores: Record<number, number> = {
  1: 10,
  2: 25,
  3: 40,
};

Приклад 3. Словник перекладів

javascript

type Locale = 'en' | 'de';
type Translations = Record<Locale, string>;

const greeting: Translations = {
  en: 'Hello',
  de: 'Hallo',
};

Приклад 4. Типізований об'єкт за enum

javascript

enum Role {
  Admin = 'admin',
  User = 'user',
}

type RolePermissions = Record<Role, string[]>;

const permissions: RolePermissions = {
  [Role.Admin]: ['create', 'edit', 'delete'],
  [Role.User]: ['view'],
};

7. Комбінування з іншими Utility Types

Можна поєднувати Record з Partial, Readonly тощо.

javascript

type PartialConfig = Partial<Record<'host' | 'port' | 'ssl', string>>;

const config: PartialConfig = {
  host: 'localhost',
  ssl: 'true',
};

Тепер властивості можна вказувати не всі.

8. Помилки при неправильних ключах

TypeScript не дозволить додати неіснуючий ключ:

javascript

type Roles = 'admin' | 'user';
type RoleLabels = Record<Roles, string>;

const labels: RoleLabels = {
  admin: 'Administrator',
  user: 'User',
  guest: 'Guest', // Помилка - "guest" не входить у Roles
};

Підсумок

Питання	Відповідь
Що робить `Record<K, T>`	Створює тип об'єкта, де ключі мають тип `K`, а значення - тип `T`
Як обрати ключі	Через `union` або перелік (`'key1'
Чи перевіряє всі поля	Так, TypeScript вимагає наявності всіх ключів
Чи можна комбінувати	Так, з `Partial`, `Readonly`, `Pick` та ін.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.