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

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

Допрацюйте відповідь до «Що таке index signature в інтерфейсі?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## 1. Що таке index signature

> **Index signature** - це спеціальний синтаксис в інтерфейсі (або типі),
> який каже TypeScript:
> "у цього об'єкта може бути **будь-яка кількість властивостей** із визначеним типом ключів і значень".

---

### Приклад

```javascript
interface Dictionary {
  [key: string]: string;
}

const colors: Dictionary = {
  red: "#ff0000",
  green: "#00ff00",
  blue: "#0000ff",
};
```

> Тут `[key: string]: string` - це **index signature**.
>
> Вона означає:
>
> - ключі можуть бути будь-якими рядками (`string`);
> - значення для всіх цих ключів мають бути рядками (`string`).

---

## 2. Загальний синтаксис

```javascript
interface SomeInterface {
  [key: KeyType]: ValueType;
}
```

| Елемент | Що означає |
| --- | --- |
| `key` | ім'я змінної (може бути будь-яким) |
| `KeyType` | тип ключа (`string`, `number`, `symbol`) |
| `ValueType` | тип значень |

---

### Приклад із числами

```javascript
interface NumericIndex {
  [index: number]: string;
}

const arr: NumericIndex = ["one", "two", "three"];
```

> У цьому випадку TypeScript перевірить, що **всі значення за числовими індексами - рядки**.
> Тобто `arr[0]`, `arr[1]` тощо - це `string`.

---

## 3. Комбінування зі звичайними властивостями

Можна поєднувати **конкретні поля** з динамічними ключами:

```javascript
interface ProductInfo {
  id: number;
  name: string;
  [extra: string]: string | number; // індексна сигнатура
}

const p: ProductInfo = {
  id: 10,
  name: "Shirt",
  color: "white",
  price: 49,
};
```

> Все коректно, тому що й конкретні властивості (`id`, `name`), й динамічні (`color`, `price`)
> відповідають типу `string | number`.

---

## 4. Важливо: індексна сигнатура задає **обмеження для всіх властивостей**

Якщо в інтерфейсі є `[key: string]: string`,
то **всі властивості** цього інтерфейсу мають бути сумісні з `string`.

```javascript
interface BadExample {
  id: number;             // Помилка
  [key: string]: string;  // тому що number несумісний зі string
}
```

Щоб виправити, потрібно включити обидва типи:

```javascript
interface GoodExample {
  id: number;
  [key: string]: string | number;
}
```

---

## 5. Типи ключів: `string`, `number`, `symbol`

| Тип ключа | Коли використовується | Приклад |
| --- | --- | --- |
| `string` | для звичайних об'єктів | `[key: string]: number` |
| `number` | для масивоподібних структур | `[index: number]: string` |
| `symbol` | рідко, для унікальних ключів | `[key: symbol]: boolean` |

> Зазвичай застосовують `[key: string]`,
> тому що більшість об'єктів у JS використовують рядкові ключі.

---

## 6. Різниця між index signature та `Record`

| Особливість | `index signature` | `Record<K, T>` |
| --- | --- | --- |
| Синтаксис | `[key: string]: T` | `Record<string, T>` |
| Гнучкість (можна додати поля) | Так | Обмежено |
| Підходить для інтерфейсів | Так | Частіше в `type` |
| Можна комбінувати з конкретними властивостями | Так | Не завжди зручно |
| Перевірка ключів через union | Ні | Так |

---

## 7. Приклад реального застосування

### Словник перекладів

```javascript
interface Translations {
  [locale: string]: string;
}

const messages: Translations = {
  en: "Hello",
  fr: "Bonjour",
  de: "Hallo",
};
```

---

### Карта користувачів

```javascript
interface UsersMap {
  [id: number]: { name: string; age: number };
}

const users: UsersMap = {
  1: { name: "Tim", age: 25 },
  2: { name: "Max", age: 30 },
};
```

---

## Підсумок

> **Index signature** - це спосіб описати об'єкт із **непередбачуваними (динамічними)** ключами в TypeScript.
>
> Синтаксис:
>
> ```javascript
> interface Example {
>   [key: string]: ValueType;
> }
> ```
>
> Дозволяє:
>
> - описувати словники й таблиці (`Record`-подібні об'єкти),
> - комбінувати фіксовані та довільні поля,
> - контролювати тип значень за будь-яких ключів.
>
> Часто використовується для:
>
> - словників (`Dictionary`),
> - конфігурацій (`Config`),
> - кешів (`Cache`),
> - локалізацій (`Translations`).

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

Для рев’юера

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

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