Индексный доступ T[K]

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Тип поля описан один раз — в типе объекта. Если этот же тип понадобился рядом, его не переписывают руками: берут прямо из объекта квадратными скобками. Синтаксис знакомый по значениям, разница в том, что слева стоит тип, а не переменная, и результат — тоже тип.

ts

type User = {
  id: number;
  name: string;
  role: "admin" | "user";
};
type Role = User["role"]; // взято из User, а не написано заново
const role: Role = "admin";
console.log(role);
const guest: Role = "гость";
console.log(guest);

страница примера

Сначала предположите, что выведет код

Диагностика ровно одна, на предпоследней строке: Тип "гость" не может быть назначен для типа "admin" | "user". Дальше код всё равно выполнился и напечатал «гость» — как и везде в этой части, компилятор высказался, а исполнение пошло своим чередом.

Ценность здесь не в экономии символов, а в связи. Допишите в User третью роль — Role узнает об этом сам. Скопированное объединение type Role = "admin" | "user" не узнает никогда, и однажды разъедется с оригиналом молча.

Единственная синтаксическая ловушка — точка. У значений user.role и user["role"] взаимозаменяемы, у типов работает только вторая форма.

ts

type User = { id: number; name: string };
type Name1 = User.name;
type Name2 = User["name"];
const author: Name2 = "Рико";
console.log(author);

страница примера

Сначала предположите, что выведет код

Текст диагностики стоит прочитать целиком, потому что в нём же лежит и ответ: Не удается получить доступ к User.name, так как User является типом, но не является пространством имен. Вы хотели получить тип свойства name в User с использованием User["name"]?

Скобки в типе — это не индексация объекта. Слева тип, внутри тип, снаружи тип. Никакого кода в сборку такая строка не даёт.

Работает это не только с type: интерфейс и класс индексируются точно так же — компилятору важна форма, а не то, каким словом её объявили.

ts

interface Task {
  id: number;
  title: string;
}
class Marker {
  label = "точка";
}
type Title = Task["title"];
type Label = Marker["label"];
const title: Title = "Купить хлеб";
const label: Label = 42;
console.log(title, label);

страница примера

Сначала предположите, что выведет код

Ошибка одна, на label: Тип "number" не может быть назначен для типа "string" — поле класса объявлено без аннотации, и его тип вывелся из значения.

Самая частая ошибка новичка в этом месте — подставить в скобки переменную. Переменная живёт в мире значений, а внутри скобок компилятор ждёт тип, и говорит об этом сразу двумя диагностиками.

ts

type User = { id: number; name: string };
const field = "name";
type ByVar = User[field];
type ByType = User[typeof field];
const value: ByType = "Рико";
console.log(value);

страница примера

Сначала предположите, что выведет код

Первая — Тип "field" невозможно использовать как тип индекса, вторая — "field" относится к значению, но здесь используется как тип. Возможно, вы имели в виду "typeof field"?. Вторая и есть подсказка: typeof переводит значение в тип, а const дал переменной литеральный тип "name" — то, что и требовалось в скобках.

В скобках необязательно стоять одному литералу. Поставьте объединение — и получите объединение типов всех названных полей.

ts

type User = { id: number; name: string; role: "admin" | "user" };
type Field = User["id" | "name"];
const values: Field[] = [1, "Рико"];
console.log(values.join(" / "));
const flag: Field = true;
console.log(flag);

страница примера

Сначала предположите, что выведет код

Обратите внимание на направление: два ключа дали не «поле, которое и число, и строка», а «либо число, либо строка». Индексный доступ отвечает на вопрос «что может лежать по одному из этих ключей», а такой ответ всегда объединение.

Предельный случай — все ключи разом. Их выдаёт keyof из прошлой статьи, и связка T[keyof T] читается как «тип любого значения этого объекта».

ts

type Row = { id: number; title: string; done: boolean };
type Cell = Row[keyof Row];
function render(cell: Cell): string {
  // сужение по typeof из четвёртой главы: до него cell — объединение трёх типов
  if (typeof cell === "boolean") {
    return cell ? "да" : "нет";
  }
  return String(cell);
}
const row: Row = { id: 7, title: "Купить хлеб", done: false };
console.log(Object.values(row).map(render).join(" | "));

страница примера

Сначала предположите, что выведет код

Ни одной диагностики: Object.values вернул массив с типом элемента number | string | boolean, а render ровно такой элемент и ждёт. Заметьте, что Cell нигде не перечисляет типы руками — добавится поле в Row, и render начнёт требовать разбора нового варианта.

keyof даёт ключи, индексный доступ — значения. T[keyof T] — это «значения по всем ключам», аналог Object.values на уровне типов.

Если названного поля в типе нет, компилятор говорит об этом теми же словами, что и про обычное свойство. Интереснее случай, когда тип слева — объединение: поле должно найтись у каждого варианта.

ts

type Circle = { kind: "circle"; r: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;
type Kind = Shape["kind"];
const kind: Kind = "square";
console.log(kind);
type Radius = Shape["r"];

страница примера

Сначала предположите, что выведет код

Свойство "r" не существует в типе "Shape" — и это правда: у половины значений типа Shape радиуса нет. Поле-метка kind есть у обоих вариантов, поэтому индексный доступ к ней проходит и собирает объединение обеих меток. Это размеченные объединения из главы про сужение.

Можно — но только у типа, который обещал значение для любой строки. Такое обещание даёт индексная сигнатура из прошлой главы; у типа с перечисленными полями его нет.

ts

type Prices = Record<string, number>;
type Value = Prices[string];
const price: Value = 50;
console.log(price);
type User = { id: number; name: string };
type Any = User[string];

страница примера

Сначала предположите, что выведет код

Диагностика — Тип "User" не содержит соответствующую сигнатуру индекса для типа "string". Это ровно та же граница, что и у TS7053 на значениях: перечисленные поля отвечают за свои ключи, а не за все строки сразу.

У массива нет полей с именами, но ключи у него есть — числовые. Значит, индексный доступ применим и к нему: T[number] означает «тип того, что лежит по любому числовому ключу», то есть тип элемента.

ts

const COLORS = ["красный", "зелёный", "синий"] as const;
type Color = (typeof COLORS)[number];
function paint(color: Color): void {
  console.log("красим в " + color);
}
paint("синий");
paint("жёлтый");

страница примера

Сначала предположите, что выведет код

Это самая ходовая форма индексного доступа во всём TypeScript. Список цветов написан один раз и работает дважды: как значение — в COLORS его можно перебрать, вывести в выпадающий список; как тип — Color сторожит каждый вызов. Диагностика на последней строке: Аргумент типа "жёлтый" нельзя назначить параметру типа "красный" | "зелёный" | "синий".

Работает это только вместе с as const из третьей главы. Уберите его — и весь эффект пропадёт, причём молча.

ts

const COLORS = ["красный", "зелёный", "синий"]; // as const забыли
type Color = (typeof COLORS)[number];
function paint(color: Color): void {
  console.log("красим в " + color);
}
paint("жёлтый");

страница примера

Сначала предположите, что выведет код

Без as const тип массива — string[], элемент у него string, и «жёлтый» под это описание подходит. Проверять было нечего: тип честно описывает то, что ему сказали.

as const делает из массива кортеж литералов, [number] складывает их обратно в объединение. Одно без другого не работает.

У кортежа осмысленны и конкретные номера: T[0] — тип первого места, T[0 | 1] — двух первых. И ещё одно поле у кортежа особенное — length.

ts

type Point = [number, number, string];
type Label = Point[2];
type Coord = Point[0 | 1];
type Size = Point["length"];
const point: Point = [10, 20, "старт"];
const label: Label = point[2];
console.log(label.toUpperCase());
const size: Size = 4;
console.log(size, point.length);

страница примера

Сначала предположите, что выведет код

Тип "4" не может быть назначен для типа "3" — длина кортежа известна компилятору как конкретное число, а не как «какое-то number». У обычного массива length имеет тип number, и такой диагностики не будет.

COLORS — переменная, то есть значение. В типовой позиции она сама по себе не стоит: сначала typeof переводит её в тип, и только потом к этому типу применяются скобки.

ts

const COLORS = ["красный", "зелёный"] as const;
type Wrong = COLORS[number];
type Right = (typeof COLORS)[number];
const color: Right = "красный";
console.log(color);

страница примера

Сначала предположите, что выведет код

Диагностика снова подсказывает решение сама: "COLORS" относится к значению, но здесь используется как тип. Возможно, вы имели в виду "typeof COLORS"?. Скобки вокруг typeof COLORS обязательными не являются — typeof COLORS[number] компилятор разберёт точно так же, — но со скобками порядок чтения виден глазом, и в чужом коде вы чаще встретите именно их.

Индексный доступ возвращает тип — значит, к результату можно применить его снова. Так из одного описания достаётся любая его часть, на любой глубине.

ts

type Order = {
  id: number;
  customer: { name: string; phone: string };
  items: { title: string; price: number; qty: number }[];
};
type Item = Order["items"][number]; // одна позиция заказа
function lineTotal(item: Item): number {
  return item.price * item.qty;
}
const order: Order = {
  id: 1,
  customer: { name: "Рико", phone: "+7 000" },
  items: [
    { title: "хлеб", price: 40, qty: 2 },
    { title: "молоко", price: 90, qty: 1 }
  ]
};
console.log(order.items.map(lineTotal));
lineTotal({ title: "чай", price: 120 });

страница примера

Сначала предположите, что выведет код

Читается цепочка слева направо, как обычное обращение к данным: у Order берём items, у массива — элемент, у элемента при желании — price. Вложенный тип позиции нигде не назван отдельно, и это нормально: имя ему даёт Item, а источник остаётся один.

Диагностика на последней строке показывает ещё кое-что важное: в тексте ошибки указан не Item, а расписанная форма { title: string; price: number; qty: number; }. Псевдоним прозрачен — компилятор сверяет структуру, а не имя.

Ломается цепочка на необязательном поле, и по хорошей причине.

ts

type Config = {
  name: string;
  server?: { port: number };
};
type Port = Config["server"]["port"];
const port: Port = 8080;
console.log(port);

страница примера

Сначала предположите, что выведет код

Текст называет виновника прямо: Свойство "port" не существует в типе "{ port: number; } | undefined". Вопросительный знак в server? добавил в тип undefined, а у undefined поля port действительно нет — тот же strictNullChecks, что и в главе про сужение, только на уровне типов.

ts

type Config = {
  name: string;
  server?: { port: number };
};
// NonNullable выбрасывает undefined из объединения
type Port = NonNullable<Config["server"]>["port"];
const port: Port = 8080;
console.log(port);
const wrong: Port = "8080";
console.log(wrong);

страница примера

Сначала предположите, что выведет код

NonNullable — встроенная утилита, одна из тех, что разбираются в следующей статье. Здесь она нужна ровно затем, чтобы убрать undefined перед следующей скобкой.

До сих пор ключ был известен прямо на месте. Настоящая сила индексного доступа открывается там, где ключ приходит параметром: тип значения тогда пересчитывается под каждый вызов отдельно.

ts

type Settings = { theme: "dark" | "light"; fontSize: number; wrap: boolean };
const settings: Settings = { theme: "dark", fontSize: 14, wrap: true };

function setOption<K extends keyof Settings>(key: K, value: Settings[K]): void {
  settings[key] = value;
  console.log(key + " = " + settings[key]);
}
setOption("fontSize", 16);
setOption("theme", "light");
setOption("wrap", "да");

страница примера

Сначала предположите, что выведет код

Ограничение K extends keyof Settings из главы про дженерики не даёт передать посторонний ключ, а Settings[K] связывает второй аргумент с первым. В вызове setOption("wrap", ...) параметр K сузился до литерала "wrap", и Settings[K] в тот же миг стал boolean: Аргумент типа "string" нельзя назначить параметру типа "boolean". Строка при этом всё равно записалась — диагностика не отменяет исполнения.

Тот же приём работает и на возврате. Разница между «ключом-параметром» и «ключом из объединения» видна лучше всего рядом.

ts

type Settings = { theme: "dark" | "light"; fontSize: number; wrap: boolean };
const settings: Settings = { theme: "dark", fontSize: 14, wrap: true };

function getLoose(key: keyof Settings): Settings[keyof Settings] {
  return settings[key];
}
const loose = getLoose("fontSize");
console.log(loose.toFixed(1));

function get<K extends keyof Settings>(key: K): Settings[K] {
  return settings[key];
}
const exact = get("fontSize");
console.log(exact.toFixed(1));

страница примера

Сначала предположите, что выведет код

Обе функции возвращают одно и то же число, но обещают разное. У getLoose в подписи стоит Settings[keyof Settings] — «что-нибудь из значений», поэтому Свойство "toFixed" не существует в типе number | boolean | "dark" | "light", а вложенной причиной идёт Свойство "toFixed" не существует в типе false. У get ключ прошёл параметром и вернулся числом — вызов проходит без слова.

Правило простое: если ключ известен вызывающему, пропускайте его через параметр K, а не через keyof T. Иначе тип результата разъедется с реальностью в первой же строке.

Индексный доступ описывает, что должно лежать по ключу, и никак не проверяет, что там что-то есть. По умолчанию компилятор считает любой элемент массива существующим.

ts

const COLORS = ["красный", "зелёный", "синий"] as const;
type Color = (typeof COLORS)[number];
function third(list: readonly Color[]): Color {
  return list[2];
}
console.log(third(COLORS));
console.log(third([]).toUpperCase());

страница примера

Сначала предположите, что выведет код

Ни одной диагностики — и TypeError: Cannot read properties of undefined. Тип элемента здесь ни при чём: он описывает содержимое, а не длину. Проверку на выход за границы включает отдельный флаг noUncheckedIndexedAccess, до которого доберёмся в главе про настройку; по умолчанию он выключен.

Запись	Что достаёт	Пример
`T["поле"]`	тип одного поля	`User["name"]` → `string`
`T["a" \| "b"]`	объединение типов нескольких полей	`User["id" \| "name"]` → `number \| string`
`T[keyof T]`	объединение типов всех полей	`Row[keyof Row]` → `number \| string \| boolean`
`T[number]`	тип элемента массива	`(typeof COLORS)[number]` → объединение литералов
`T[0]`	тип места в кортеже	`Point[2]` → `string`
`T["length"]`	длину кортежа литеральным числом	`Point["length"]` → `3`
`T[K]`	поле по параметру дженерика	`Settings[K]` → тип именно этой настройки

Индексный доступ T["поле"] достаёт тип поля из типа объекта: одно описание вместо копипасты, и связь, которая не разъедется.
Работают только квадратные скобки — точка даёт TS2713, а переменная в скобках TS2749: там нужен тип, и typeof его даёт.
В скобках может стоять объединение ключей; T[keyof T] — это объединение типов всех значений.
T[number] достаёт тип элемента массива, и в паре с as const превращает список значений в объединение литералов.
Цепочка индексов идёт на любую глубину, но спотыкается о необязательное поле: в типе появляется undefined, и его убирают NonNullable.
В дженерике T[K] связывает ключ и значение — так один get возвращает точный тип, а не объединение всех полей.

1/4Написано type User = { name: string }, следом type Name = User.name. Что скажет компилятор?

2/4Есть const field = "name" и type N = User[field]. Почему это не работает?

3/4Массив объявлен как const TABS = ["профиль", "заказы"], без as const. Каким получится (typeof TABS)[number]?

4/4Тип Shape — это Circle | Square, поле kind есть у обоих, поле r только у круга. Что получится из Shape["kind"] и Shape["r"]?

Подпись без копипасты

Тип покупателя описан в Order, а в параметре функции переписан заново — и уже разъехался с оригиналом: в заказе три поля, в параметре два. Перепишите обе функции так, чтобы форма бралась из Order, а не повторялась, и добавьте в подпись почту.

ts

type Order = {
  id: number;
  customer: { name: string; phone: string; email: string };
  items: { title: string; price: number }[];
};
function formatCustomer(customer: { name: string; phone: string }): string {
  return customer.name + ", " + customer.phone;
}
function titleOf(item: { title: string; price: number }): string {
  return item.title;
}
const order: Order = {
  id: 1,
  customer: { name: "Рико", phone: "+7 000", email: "rico@example.com" },
  items: [{ title: "хлеб", price: 40 }]
};
console.log(formatCustomer(order.customer)); // Рико, +7 000
console.log(order.items.map(titleOf).join(", ")); // хлеб

страница примера

Сначала предположите, что выведет код

Оба параметра описываются индексным доступом: покупатель — Order["customer"], позиция — Order["items"][number]. После этого почта оказывается в типе сама, и её можно использовать.

tsлистинг · не запускается

type Order = {
  id: number;
  customer: { name: string; phone: string; email: string };
  items: { title: string; price: number }[];
};
function formatCustomer(customer: Order["customer"]): string {
  return customer.name + ", " + customer.phone + " (" + customer.email + ")";
}
function titleOf(item: Order["items"][number]): string {
  return item.title;
}
const order: Order = {
  id: 1,
  customer: { name: "Рико", phone: "+7 000", email: "rico@example.com" },
  items: [{ title: "хлеб", price: 40 }]
};
console.log(formatCustomer(order.customer)); // Рико, +7 000 (rico@example.com)
console.log(order.items.map(titleOf).join(", ")); // хлеб

type Order = {
  id: number;
  customer: { name: string; phone: string; email: string };
  items: { title: string; price: number }[];
};
function formatCustomer(customer: Order["customer"]): string {
  return customer.name + ", " + customer.phone + " (" + customer.email + ")";
}
function titleOf(item: Order["items"][number]): string {
  return item.title;
}
const order: Order = {
  id: 1,
  customer: { name: "Рико", phone: "+7 000", email: "rico@example.com" },
  items: [{ title: "хлеб", price: 40 }]
};
console.log(formatCustomer(order.customer)); // Рико, +7 000 (rico@example.com)
console.log(order.items.map(titleOf).join(", ")); // хлеб

Проверить починку легко: добавьте в items поле qty: number — и titleOf примет новую форму без единой правки, потому что она у него не своя, а взятая из Order. Со старой записью пришлось бы править параметр вручную, а забытая правка обнаружилась бы только на исполнении.

Вкладки из массива

Список вкладок уже есть в коде, но функция принимает любую строку — и опечатка проходит молча. Сделайте так, чтобы имя вкладки бралось из самого списка: второй вызов должен дать TS2345, а список остаться единственным местом, где вкладки перечислены.

ts

const TABS = ["профиль", "заказы", "настройки"] as const;
function openTab(tab: string): void {
  console.log("открываем вкладку: " + tab);
}
openTab("заказы"); // открываем вкладку: заказы
openTab("настройик"); // опечатка, а компилятор молчит

страница примера

Сначала предположите, что выведет код

as const уже стоит, значит тип у TABS — кортеж из трёх литералов. Осталось достать из него элемент.

tsлистинг · не запускается

const TABS = ["профиль", "заказы", "настройки"] as const;
type Tab = (typeof TABS)[number];
function openTab(tab: Tab): void {
  console.log("открываем вкладку: " + tab);
}
openTab("заказы"); // открываем вкладку: заказы
openTab("настройик"); // TS2345

const TABS = ["профиль", "заказы", "настройки"] as const;
type Tab = (typeof TABS)[number];
function openTab(tab: Tab): void {
  console.log("открываем вкладку: " + tab);
}
openTab("заказы"); // открываем вкладку: заказы
openTab("настройик"); // TS2345

Диагностика: Аргумент типа "настройик" нельзя назначить параметру типа "профиль" | "заказы" | "настройки". Добавьте четвёртую вкладку в массив — тип расширится сам; напишите type Tab = "профиль" | "заказы" | "настройки" руками — и получите второй список, который однажды разойдётся с первым.

Если убрать as const, всё развалится обратно: Tab станет string, и опечатка снова пройдёт. Проверьте это сами — так связка запоминается лучше.

Порт из необязательной секции

Цепочка индексов упирается в вопросительный знак. Прочитайте диагностику и почините объявление типа Port, не трогая AppConfig: секция базы должна остаться необязательной.

ts

type AppConfig = {
  title: string;
  db?: { host: string; port: number };
};
type Port = AppConfig["db"]["port"]; // TS2339
function describe(port: Port): string {
  return "порт " + port;
}
console.log(describe(5432)); // порт 5432

страница примера

Сначала предположите, что выведет код

Текст диагностики называет тип, к которому применили вторую скобку: Свойство "port" не существует в типе "{ host: string; port: number; } | undefined". Значит, перед следующим шагом из объединения нужно убрать undefined — это делает NonNullable.

tsлистинг · не запускается

type AppConfig = {
  title: string;
  db?: { host: string; port: number };
};
type Db = NonNullable<AppConfig["db"]>;
type Port = Db["port"];
function describe(port: Port): string {
  return "порт " + port;
}
console.log(describe(5432)); // порт 5432
const config: AppConfig = { title: "магазин" };
console.log(config.db ? describe(config.db.port) : "база не настроена"); // база не настроена

type AppConfig = {
  title: string;
  db?: { host: string; port: number };
};
type Db = NonNullable<AppConfig["db"]>;
type Port = Db["port"];
function describe(port: Port): string {
  return "порт " + port;
}
console.log(describe(5432)); // порт 5432
const config: AppConfig = { title: "магазин" };
console.log(config.db ? describe(config.db.port) : "база не настроена"); // база не настроена

Промежуточное имя Db здесь только ради читаемости — можно и одной строкой: type Port = NonNullable<AppConfig["db"]>["port"].

Обратите внимание на последнюю строку: тип Port починился, но сама секция от этого не появилась. Проверка config.db ? по-прежнему обязательна — NonNullable сузил тип, а не заполнил конфигурацию.

Индексный доступ T[K]

Видеоразбор темы за 5–7 минут

Тип поля по имениСкобки вместо копипасты

Ключей может быть несколькоОбъединение в скобках и T[keyof T]

T[number]Тип элемента массива и кортежа

Цепочка вглубьOrder["items"][number]["price"]

Ключ приходит параметромT[K] в дженерике: один get вместо трёх

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Подпись без копипасты

Вкладки из массива

Порт из необязательной секции