Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить Record<K, T>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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` та ін. |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати582 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.