Індекси підписів та типи доступу до індексів у TypeScript

Індексні підписи

Індексна підпис визначає тип для динамічних ключів в об'єкті, коли ви не знаєте всі назви властивостей заздалегідь.

Основний синтаксис

typescript

interface StringMap {
  [key: string]: string;
}

const translations: StringMap = {
  hello: "привіт",
  goodbye: "до побачення",
  // Дозволено будь-який рядковий ключ з рядковим значенням
};

interface NumberMap {
  [key: string]: number;
}

const scores: NumberMap = {
  math: 95,
  english: 88,
};

Індексна підпис з відомими властивостями

typescript

interface Config {
  name: string;                  // Відома властивість
  version: number;               // Відома властивість
  [key: string]: string | number; // Динамічні властивості (повинні бути сумісними)
}

const config: Config = {
  name: "MyApp",
  version: 1,
  apiUrl: "https://api.example.com",
  timeout: 5000,
};

Запис проти Індексної підписи

typescript

// Індексна підпис
interface Dict {
  [key: string]: number;
}

// Утиліта типу Record (еквівалент)
type Dict = Record<string, number>;

// Запис з конкретними ключами
type Scores = Record<"math" | "english" | "science", number>;
// { math: number; english: number; science: number }

Типи доступу за індексом (Типи пошуку)

Використовуйте синтаксис T[K] для пошуку типу конкретної властивості:

typescript

interface User {
  id: string;
  name: string;
  email: string;
  address: {
    city: string;
    zip: string;
  };
}

type UserId = User["id"];           // string
type UserEmail = User["email"];      // string
type UserAddress = User["address"];  // { city: string; zip: string }
type City = User["address"]["city"]; // string

// Кілька ключів
type IdOrEmail = User["id" | "email"]; // string

Індексовий доступ з масивами

typescript

const roles = ["admin", "editor", "viewer"] as const;
type Role = typeof roles[number]; // "admin" | "editor" | "viewer"

type FirstRole = typeof roles[0]; // "admin"

Динамічні типи властивостей

typescript

interface ApiResponses {
  "/users": { users: User[] };
  "/posts": { posts: Post[] };
  "/comments": { comments: Comment[] };
}

function fetchData<T extends keyof ApiResponses>(
  endpoint: T
): Promise<ApiResponses[T]> {
  return fetch(endpoint).then(r => r.json());
}

// Тип повернення виводиться автоматично!
const result = await fetchData("/users"); // { users: User[] }

keyof з Індексними підписами

typescript

interface StringMap {
  [key: string]: string;
}
type StringMapKeys = keyof StringMap; // string | number
// (number, оскільки JS перетворює числові ключі в рядки)

interface NumberKeyMap {
  [key: number]: string;
}
type NumberMapKeys = keyof NumberKeyMap; // number

Відображені типи з доступом за індексом

typescript

// Зробити всі властивості nullable
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

type NullableUser = Nullable<User>;
// { id: string | null; name: string | null; ... }

Важливо:

Індексні підписи визначають типи для динамічних ключів об'єкта. Типи доступу за індексом (T["key"]) дозволяють вам витягувати типи властивостей. У поєднанні з keyof, генериками та відображеними типами, вони забезпечують потужні шаблони безпечних за типами для API, конфігурацій та трансформацій даних.

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

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

Premium

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

Дочитали статтю?

Практика завдань