Выводить, а не дублировать

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

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

ts

type Tab = "list" | "board";

const TABS = [
  { id: "list", title: "Список" },
  { id: "board", title: "Доска" },
  { id: "map", title: "Карта" } // вкладку добавили в данные — и только туда
];

function titleOf(tab: Tab): string {
  const found = TABS.find((t) => t.id === tab);
  return found ? found.title : "нет такой";
}

console.log(titleOf("list"));
console.log(titleOf("map"));

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

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

Диагностика одна: Аргумент типа ""map"" нельзя назначить параметру типа "Tab", это TS2345. Странность в том, что вызов правильный — вкладка map в данных есть, у неё есть заголовок, и после запуска в консоли появилась «Карта». Ошибся не вызов, а тип: он описывает мир, которого уже нет.

Вторая половина беды выглядит противоположно и обходится дороже. Если описания разъехались в другую сторону, компилятор промолчит вовсе.

ts

// вкладку "chart" из данных убрали, а из типа убрать забыли
type Tab = "list" | "board" | "chart";

const TABS = [
  { id: "list", title: "Список" },
  { id: "board", title: "Доска" }
];

function titleOf(tab: Tab): string {
  const found = TABS.find((t) => t.id === tab);
  return found ? found.title : "нет такой";
}

console.log(titleOf("board"));
console.log(titleOf("chart"));

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

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

Ни одной диагностики. Тип обещает вкладку chart, данные о ней не знают, titleOf честно отдаёт заглушку. Сборка зелёная, типы проверены — а в интерфейсе пустая вкладка.

Дело не в лени: переписать три строки недолго. Дело в том, что для компилятора Tab и TABS — два независимых объявления, между которыми нет никакой связи, и сверять их он не станет. Значит, сверять надо не глазами, а сделать одно из другого.

Копии описаний расходятся молча. Компилятор сторожит только те связи, о которых ему сказали.

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

ts

const TABS = [
  { id: "list", title: "Список" },
  { id: "board", title: "Доска" },
  { id: "map", title: "Карта" }
] as const;

// [number] берёт любой элемент массива, ["id"] — его поле: union собрался сам
type Tab = (typeof TABS)[number]["id"];

function titleOf(tab: Tab): string {
  const found = TABS.find((t) => t.id === tab);
  return found ? found.title : "нет такой";
}

console.log(titleOf("map"));
console.log(titleOf("chart"));

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

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

Выражение (typeof TABS)[number]["id"] читается слева направо. typeof TABS — тип значения, здесь это кортеж из трёх объектов с литеральными полями (за литералы отвечает as const). [number] — индексный доступ по числовому ключу, то есть «любой элемент», объединение трёх объектов. ["id"] берёт у каждого поле id, и получается union трёх строк.

Компилятор ответил Аргумент типа ""chart"" нельзя назначить параметру типа ""map" | "list" | "board"" и заодно показал содержимое union — ровно те три идентификатора, что лежат в массиве. Без as const фокус не сработал бы: у обычного массива поле id выводится как string, и Tab оказался бы просто string — проверкой, которая ничего не проверяет.

Настоящая польза видна не в момент написания, а в момент правки. Добавили в массив ещё одну вкладку — тип пересчитался сам, и вместе с ним изменились все места, где он используется.

ts

const TABS = [
  { id: "list", title: "Список" },
  { id: "board", title: "Доска" },
  { id: "map", title: "Карта" }
] as const;

type Tab = (typeof TABS)[number]["id"];

const icons: Record<Tab, string> = {
  list: "≡",
  board: "▦"
};

console.log(icons.list);

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

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

TS2741: Свойство "map" отсутствует в типе "{ list: string; board: string; }" и является обязательным в типе "Record<"map" | "list" | "board", string>". Компилятор указал на объект, который не успел за источником. Это и есть та работа, ради которой всё затевалось: правка в одном месте превращается в список дел в остальных.

Хороший производный тип превращает «не забыть обновить» в ошибку сборки.

Форма — самый частый случай, где описаний заводится сразу три: список полей для рендера, тип значений, тип ошибок. Хватает первого.

ts

const FIELDS = ["email", "phone", "city"] as const;

type Field = (typeof FIELDS)[number];
type FormValues = Record<Field, string>;
type FormErrors = Partial<Record<Field, string>>;

const values: FormValues = { email: "rico@mail.ru", phone: "+7 900", city: "Дубай" };
const errors: FormErrors = { phone: "слишком короткий" };

// field имеет тип Field, а не string
for (const field of FIELDS) {
  console.log(field + ": " + values[field] + " " + (errors[field] ?? "ок"));
}

console.log(values.adress);

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

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

От одного массива пошли три типа: Field — имена полей, FormValues — по строке на каждое, FormErrors — сообщение, может быть, у какого-то. Внутри цикла field имеет тип Field, а не string, поэтому values[field] проходит без TS7053 из статьи про индексные сигнатуры: компилятор знает, что такой ключ есть наверняка. А выдуманное поле ловится сразу — Свойство "adress" не существует в типе "FormValues", TS2339.

Иногда источником удобнее сделать не список имён, а объект-образец: пустую модель, с которой начинается форма, или набор значений по умолчанию. Тогда к typeof добавляется keyof, и одно значение раздаёт типы всему модулю.

ts

// единственное описание модели — пустое значение, с которого начинается форма
const blankUser = {
  id: 0,
  name: "",
  email: "",
  active: false
};

type User = typeof blankUser;
type UserField = keyof User;
type UserPatch = Partial<User>;
type FieldErrors = Partial<Record<UserField, string>>;

function applyPatch(user: User, patch: UserPatch): User {
  return { ...user, ...patch };
}

const errors: FieldErrors = { email: "нужна почта" };
console.log(errors.email);
console.log(applyPatch(blankUser, { name: "Рико" }).name);

console.log("[" + applyPatch(blankUser, { nmae: "Рико" }).name + "]");

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

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

Опечатку в патче поймал TS2353: Объектный литерал может использовать только известные свойства. "nmae" не существует в типе "Partial<{ id: number; name: string; email: string; active: boolean; }>". А запуск показал, чем это обходится без типов: в квадратных скобках пусто. Ключ nmae спокойно лёг в объект рядом с name, имя пользователя осталось прежним, и никто не заметил.

Обратите внимание на порядок: сначала появилось значение, которое всё равно нужно программе, и только потом типы. Придумывать значение ради вывода типов не надо — если источником просится тип, пусть источником и будет тип.

Не всякая правда лежит в константе. Часто настоящее описание — это функция: фабрика начального состояния, загрузчик данных, конструктор объекта. Тогда тип снимают с её результата.

ts

function createState() {
  const items: string[] = [];
  return { items, count: 0, open: false };
}

// описание состояния одно — сама фабрика; тип снимается с её результата
type State = ReturnType<typeof createState>;

function describe(state: State): string {
  return state.count + " шт., открыто: " + state.open;
}

const state = createState();
state.items.push("молоко");
state.count = state.items.length;
console.log(describe(state));

const restored: State = { items: ["хлеб"], count: 1 };
console.log(restored.items[0]);

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

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

ReturnType<typeof createState> работает в два приёма: typeof превращает функцию-значение в тип функции, ReturnType достаёт из него тип возврата. Дописали в фабрику поле — оно тут же появилось у всех, кто работает с State, и первым сломалось восстановление: Свойство "open" отсутствует в типе "{ items: string[]; count: number; }". Ровно то место, куда и нужно было заглянуть.

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

ts

async function loadUser(id: number) {
  return { id, name: "Рико", tags: ["автор"] };
}

function greet(user: Awaited<ReturnType<typeof loadUser>>): string {
  return "Привет, " + user.name + " (" + user.tags.join(", ") + ")";
}

loadUser(1).then((user) => console.log(greet(user)));

const cached: ReturnType<typeof loadUser> = { id: 2, name: "Женя", tags: [] };

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

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

ReturnType<typeof loadUser> — это Promise<{ id: number; name: string; tags: string[]; }>, а не пользователь: async-функция возвращает обещание, и тип честно это повторяет. Компилятор так и сказал — "id" не существует в типе "Promise<…>". Развернуть обёртку — работа Awaited, и именно поэтому в паре с ReturnType он встречается чаще, чем сам по себе.

Что нужно	Источник	Как пишется
Тип конфига	само значение	`typeof CONFIG`
Union допустимых значений	массив с `as const`	`(typeof TABS)[number]`
Union ключей	тип модели	`keyof User`
Тип одного поля	тип модели	`User["email"]`
Черновик или патч	тип модели	`Partial<User>`
Таблица по ключам	union ключей	`Record<Field, string>`
Тип состояния	фабрика	`ReturnType<typeof createState>`
Тип загруженных данных	async-функция	`Awaited<ReturnType<typeof loadCart>>`

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

ts

function sendMessage(to: string, text: string, urgent: boolean): void {
  console.log((urgent ? "СРОЧНО " : "") + to + ": " + text);
}

// список аргументов тоже не переписываем руками
type SendArgs = Parameters<typeof sendMessage>;

const queue: SendArgs[] = [
  ["Рико", "привет", false],
  ["Женя", "прод лежит", true]
];

for (const args of queue) {
  sendMessage(...args);
}

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

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

Кортеж из статьи про массивы здесь работает по назначению: длина известна, порядок типов известен, и sendMessage(...args) раскладывается по параметрам без единого приведения. Поменяется сигнатура функции — поменяется и содержимое очереди.

У приёма есть цена, и первый счёт приходит в тот момент, когда вы ошибаетесь в самом источнике. Выведенный тип не проверяет значение — он его повторяет.

ts

const TABS = [
  { id: "list", title: "Список" },
  { id: "boadr", title: "Доска" }
] as const;

type Tab = (typeof TABS)[number]["id"];

function openTab(tab: Tab): void {
  console.log("открыли " + tab);
}

openTab("board");

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

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

Компилятор отверг правильное слово: Аргумент типа ""board"" нельзя назначить параметру типа ""list" | "boadr"". Опечатка попала в данные, стала частью типа и теперь защищена системой типов. Читать такую диагностику надо не как «ошибка в вызове», а как отчёт о содержимом источника — привычка из статьи про чтение диагностики: смотреть не только на подчёркнутую строку.

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

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

Внутри модуля источник — значение. На границе модуля источник — тип, а значение под него подгоняется.

Когда первичен тип, значение к нему прижимают аннотацией — как icons из второго раздела. Проверка полноты работает, но за неё берут плату: тип переменной становится тем, что написано в аннотации, а не тем, что лежит в объекте.

ts

type Tab = "list" | "board";

const titles: Record<Tab, string> = { list: "Список", board: "Доска" };

const first: "Список" = titles.list;
console.log(first);

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

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

titles.list — это string, литерал «Список» потерян. Обычно всё равно, но не тогда, когда из этого же объекта хочется вывести ещё один тип. Для таких случаев есть оператор satisfies: он проверяет значение типом, ничего не огрубляя, — ему посвящена статья «satisfies: проверить, не потеряв вывод» в главе про границы программы.

Два описания одной сущности расходятся молча: компилятор не знает, что массив данных и написанный руками union связаны.
Источником назначают то, что программе нужно в любом случае, — массив, объект-образец, фабрику; остальные типы выводят из него.
as const плюс typeof плюс индексный доступ превращают данные в union: (typeof TABS)[number]["id"].
Одно описание формы даёт и список полей через keyof, и значения через Record, и черновик через Partial.
Тип состояния снимают с фабрики через ReturnType, а у асинхронной функции — через Awaited<ReturnType<…>>.
Вывод повторяет значение, а не проверяет его: опечатка в источнике становится частью типа, а на границе модуля тип по-прежнему пишут руками.

1/4Массив TABS объявлен без as const, а тип написан как (typeof TABS)[number]["id"]. Что получится?

2/4loadUser — асинхронная функция, возвращающая { id, name }. Что такое ReturnType<typeof loadUser>?

3/4Tab выведен из массива TABS, а рядом объявлен const icons: Record<Tab, string>. В массив добавили четвёртую вкладку. Что скажет компилятор?

4/4В массиве-источнике опечатка: идентификатор записан как "boadr". В коде вызывают openTab("board"). Что произойдёт?

Один список вместо трёх

Роли перечислены дважды — в массиве и в union, — и уже разъехались: «Гость» есть в данных, но не в типе. Сделайте массив единственным источником: Role должен получаться из него, а объект permissions — проверяться на полноту.

ts

type Role = "admin" | "editor" | "viewer";

const ROLES = [
  { id: "admin", title: "Администратор" },
  { id: "editor", title: "Редактор" },
  { id: "viewer", title: "Читатель" },
  { id: "guest", title: "Гость" }
];

const permissions: Record<Role, number> = {
  admin: 3,
  editor: 2,
  viewer: 1
};

for (const role of ROLES) {
  console.log(role.title + ": " + permissions[role.id]); // Гость: undefined
}

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

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

Массив фиксируем через as const, тип собираем индексным доступом. После этого Record<Role, number> сам потребует четвёртый ключ, и его останется дописать.

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

const ROLES = [
  { id: "admin", title: "Администратор" },
  { id: "editor", title: "Редактор" },
  { id: "viewer", title: "Читатель" },
  { id: "guest", title: "Гость" }
] as const;

type Role = (typeof ROLES)[number]["id"];

const permissions: Record<Role, number> = {
  admin: 3,
  editor: 2,
  viewer: 1,
  guest: 0
};

for (const role of ROLES) {
  console.log(role.title + ": " + permissions[role.id]); // Гость: 0
}

const ROLES = [
  { id: "admin", title: "Администратор" },
  { id: "editor", title: "Редактор" },
  { id: "viewer", title: "Читатель" },
  { id: "guest", title: "Гость" }
] as const;

type Role = (typeof ROLES)[number]["id"];

const permissions: Record<Role, number> = {
  admin: 3,
  editor: 2,
  viewer: 1,
  guest: 0
};

for (const role of ROLES) {
  console.log(role.title + ": " + permissions[role.id]); // Гость: 0
}

Заодно исчезла TS7053 в цикле: role.id теперь имеет тип Role, а не string, и индексация по нему законна. Именно поэтому «Гость» перестал быть undefined.

Корзина из загрузчика

Функция loadCart отдаёт корзину с валютой, а тип Cart написан руками и про валюту не знает — отсюда TS2339. Свяжите тип с функцией, не меняя саму функцию и не перечисляя поля заново.

ts

async function loadCart() {
  const items = ["хлеб", "молоко"];
  return { items, total: 120, currency: "AED" };
}

// тип написан руками и уже отстал от функции: валюты в нём нет
type Cart = { items: string[]; total: number };

function render(cart: Cart): string {
  return cart.items.length + " шт. на " + cart.total + " " + cart.currency;
}

loadCart().then((cart) => console.log(render(cart)));

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

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

Тип возврата у loadCart — обещание, поэтому одного ReturnType мало: нужна пара с Awaited.

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

async function loadCart() {
  const items = ["хлеб", "молоко"];
  return { items, total: 120, currency: "AED" };
}

type Cart = Awaited<ReturnType<typeof loadCart>>;

function render(cart: Cart): string {
  return cart.items.length + " шт. на " + cart.total + " " + cart.currency;
}

loadCart().then((cart) => console.log(render(cart))); // 2 шт. на 120 AED

async function loadCart() {
  const items = ["хлеб", "молоко"];
  return { items, total: 120, currency: "AED" };
}

type Cart = Awaited<ReturnType<typeof loadCart>>;

function render(cart: Cart): string {
  return cart.items.length + " шт. на " + cart.total + " " + cart.currency;
}

loadCart().then((cart) => console.log(render(cart))); // 2 шт. на 120 AED

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

Ошибки по полям

Тип ошибок формы переписан руками: поле agree потеряно, а в passwrod опечатка — и компилятор молчит, потому что сверять ему не с чем. Замените этот тип одним производным: ошибка может быть у любого поля SignupForm и только у него.

ts

interface SignupForm {
  email: string;
  password: string;
  agree: boolean;
}

// список полей переписан руками: одно поле потеряно, в другом опечатка
type SignupErrors = { email?: string; passwrod?: string };

const errors: SignupErrors = { email: "нужна почта" };
console.log(errors.email); // нужна почта

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

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

Список полей берём у самой формы через keyof, а «может быть, а может и не быть» добавляет Partial.

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

interface SignupForm {
  email: string;
  password: string;
  agree: boolean;
}

type SignupErrors = Partial<Record<keyof SignupForm, string>>;

const errors: SignupErrors = { email: "нужна почта", agree: "нужно согласие" };
console.log(errors.email, errors.agree); // нужна почта нужно согласие

interface SignupForm {
  email: string;
  password: string;
  agree: boolean;
}

type SignupErrors = Partial<Record<keyof SignupForm, string>>;

const errors: SignupErrors = { email: "нужна почта", agree: "нужно согласие" };
console.log(errors.email, errors.agree); // нужна почта нужно согласие

Проверить решение легко: допишите строку const typo: SignupErrors = { passwrod: "коротко" }; — в ответ придёт TS2561 с подсказкой Вы хотели записать "password"?. Раньше эта опечатка была частью типа, теперь она ошибка.

Выводить, а не дублировать

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

Два описания одной вещиКак расходятся массив и написанный руками union

Источник — само значениеas const, typeof и индексный доступ вместо копии

Одно описание — вся формаКлючи, значения, черновик и ошибки из одного места

Функция как источникReturnType и Awaited: тип снимается с реализации

Где вывод не помогаетОпечатка в данных, дальняя ошибка и публичный контракт

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

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

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

Один список вместо трёх

Корзина из загрузчика

Ошибки по полям