Що таке index signature в інтерфейсі?

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

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).

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

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

Premium

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