Разбор входных данных: из unknown в модель

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

У каталога ровно три источника данных снаружи: файл с товарами, который страница забирает запросом, настройки из localStorage и то, что наберут в форме. Все три отдают строку. В примерах ниже строка написана рядом с кодом — сети в песочнице нет, — но для разбора это ничего не меняет: важно не откуда она приехала, а что мы про неё знаем.

А знаем мы про неё ничего. Вот только компилятор об этом не догадывается:

ts

const text = "{\"id\": \"p-1\", \"title\": 199, \"price\": \"1990\"}";
const product = JSON.parse(text);
console.log(product.title.toUpperCase());
console.log(product.price.toFixed(2));

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

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

Ни одной претензии от компилятора — и TypeError на первой же строке вывода: title в данных оказался числом. Уберите её — упадёт вторая, потому что price приехал строкой. Это тот самый any, о котором шла речь в главе про границы: не ошибка компилятора, а его капитуляция. Всё, что вытекло из JSON.parse, считается проверенным, хотя не проверено ничего.

Первое решение проекта — техническое, но с последствиями на весь код: в разборе есть одна точка входа, и на ней стоит аннотация.

ts

const text = "{\"id\": \"p-1\", \"title\": 199}";
const raw: unknown = JSON.parse(text);
console.log(raw.title);

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

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

TS18046 выглядит как поражение: ни одного поля прочитать нельзя. Выполнение это не отменяет — типы стираются, и в песочнице вы всё равно увидите 199, — но в проекте такая ошибка останавливает сборку. И это не наказание, а техническое задание: компилятор согласен пропустить дальше любое значение, но сначала докажите, что у него та форма, на которую вы рассчитываете.

Одна дверь — это ещё и одно место для точки останова: сюда приходит сырой ответ целиком, и видно, что реально прислал сервер.

JSON.parse бросает SyntaxError на обрезанном ответе, на HTML-странице ошибки вместо данных, на пустой строке. Это тоже плохой вход, а не ошибка программиста, — и обрабатывать его нужно там же, у двери.

ts

function readCatalog(text: string): unknown {
  try {
    return JSON.parse(text);
  } catch (error) {
    // сломанная строка — это тоже плохой вход, а не ошибка программиста
    console.log("каталог не разобран: " + (error as Error).message);
    return [];
  }
}
console.log(readCatalog("[{\"id\": \"p-1\","));

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

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

Обратите внимание на error as Error: в catch попадает unknown, потому что бросить в JavaScript можно что угодно. В настоящем разборе мы это учтём аккуратнее.

Соблазн после TS18046 велик: дописать as Product[], и красное подчёркивание исчезнет. Попробуйте предсказать, что напечатает этот код, — и запустите.

ts

interface Product {
  id: string;
  title: string;
  price: number;
  tags: string[];
}
const text = "[{\"id\": \"p-1\", \"title\": \"Кружка\", \"price\": \"1990\"}]";
// as ничего не проверяет: это обещание компилятору, а не разбор данных
const list = JSON.parse(text) as Product[];
for (const item of list) {
  console.log(item.title + ": " + item.tags.join(", "));
}

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

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

Компилятор молчит: as не проверка, а заявление «я знаю лучше». Из any в Product[] он пропустит без единого вопроса. Проверять некому — и tags, которого в данных просто нет, доживает до join.

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

Приём	Что проверяет при выполнении	Чем платим
`value as Product`	ничего	падение далеко от входа
`value!`	ничего	то же самое, но короче
Предикат по списку ключей	наличие полей	типы значений так и не проверены
Разбор поле за полем	каждое поле	тридцать строк кода один раз

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

Разбор не пишут целиком — его собирают из нескольких крошечных функций, и первая же закрывает половину работы. isRecord отвечает на вопрос «это вообще объект со свойствами?» и заодно решает, каким типом станет проверенное значение.

ts

function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
const raw: unknown = JSON.parse("{\"title\": \"Кружка\", \"price\": 1990}");
if (isRecord(raw)) {
  console.log(raw.title);
  console.log(raw.price.toFixed(2));
}

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

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

Record<string, unknown> выбран не случайно. Поля читать можно, но каждое из них — unknown: последняя строка не скомпилируется, пока price не проверят отдельно. Именно это нам и нужно: одна проверка не должна открывать доступ ко всему объекту.

Напрашивается проверка без своей функции — typeof v === "object" && v !== null. Она правильная, но сужает до типа object, у которого нет ни одного свойства.

ts

const raw: unknown = JSON.parse("{\"title\": \"Кружка\"}");
if (typeof raw === "object" && raw !== null) {
  console.log(raw.title);
}

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

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

Компилятор скажет TS2339: свойство title не существует в типе object. Поэтому предикат и возвращает Record<string, unknown>, а не полагается на встроенное сужение.

Второй кирпич — функция, которая никогда не возвращает управление. Тип never здесь не украшение: он превращает вызов fail в законный «конец ветки», и компилятор перестаёт требовать от неё значения.

ts

// never говорит компилятору: после этого вызова управление сюда не вернётся
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
console.log(asString("Кружка", "items[0].title"));
console.log(asString(199, "items[0].title"));

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

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

Благодаря never тернарный оператор в asString считается корректным: либо строка, либо выхода нет. Тот же приём работает и в операторе if — после if (!isRecord(v)) fail(...) компилятор считает v записью, хотя никакого else мы не писали.

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

ts

interface Product {
  id: string;
  title: string;
  price: number;
  tags: string[];
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function asStringArray(v: unknown, path: string): string[] {
  if (!Array.isArray(v)) fail(path, "массив", v);
  // Array.isArray сужает только до any[], поэтому элементам возвращаем unknown
  const items: unknown[] = v;
  return items.map((item, i) => asString(item, path + "[" + i + "]"));
}
function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price"),
    tags: asStringArray(v.tags, path + ".tags")
  };
}
const raw: unknown = JSON.parse("{\"id\": \"p-1\", \"title\": \"Кружка\", \"price\": \"1990\", \"tags\": [\"посуда\"]}");
console.log(parseProduct(raw, "items[0]"));

interface Product {
  id: string;
  title: string;
  price: number;
  tags: string[];
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function asStringArray(v: unknown, path: string): string[] {
  if (!Array.isArray(v)) fail(path, "массив", v);
  // Array.isArray сужает только до any[], поэтому элементам возвращаем unknown
  const items: unknown[] = v;
  return items.map((item, i) => asString(item, path + "[" + i + "]"));
}
function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price"),
    tags: asStringArray(v.tags, path + ".tags")
  };
}
const raw: unknown = JSON.parse("{\"id\": \"p-1\", \"title\": \"Кружка\", \"price\": \"1990\", \"tags\": [\"посуда\"]}");
console.log(parseProduct(raw, "items[0]"));

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

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

Запустите: items[0].price: ожидалось число, получено "1990". Такое сообщение можно переслать тому, кто отдаёт данные, и он поймёт его без вас. Сравните с честным, но бесполезным Invalid product data — за ним придётся лезть в отладчик и вручную сличать три сотни карточек.

Вторая половина сделки — возвращаемый тип : Product. Он превращает модель в сторожа: разборщик, который собрал не то, компилироваться не будет.

ts

interface Product {
  id: string;
  title: string;
  price: number;
  tags: string[];
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseProduct(v: Record<string, unknown>, path: string): Product {
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
  };
}
console.log(parseProduct({ id: "p-1", title: "Кружка", price: 1990 }, "items[0]"));

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

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

TS2741: свойство tags отсутствует в собранном объекте и является обязательным в типе Product. Пока модель и разбор связаны этой аннотацией, они не разъедутся: добавили поле в интерфейс — компилятор сам приведёт вас в разборщик и покажет, где его дописать.

Путь стоит собирать строкой сверху вниз: catalog[7].availability.count читается как адрес, а не как загадка.

В модели каталога наличие товара — размеченное объединение: in-stock с количеством, preorder с датой и gone без ничего. Внутри программы метка гарантирует форму. Снаружи метка — обычная строка, которой можно доверять не больше остальных.

Первая попытка проверить её списком известных значений выглядит очевидной — и не компилируется:

ts

const KINDS = ["in-stock", "preorder", "gone"] as const;
type Kind = (typeof KINDS)[number];
function isKind(v: string): v is Kind {
  return KINDS.includes(v);
}
console.log(isKind("gone"));

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

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

TS2345: аргумент типа string нельзя назначить параметру типа "in-stock" | "preorder" | "gone". Массив объявлен через as const, поэтому его includes согласен искать только одно из трёх значений — а мы пришли с произвольной строкой. Проверка, смысл которой в поиске неизвестного, запрещена самим типом искомого.

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

ts

const KINDS = ["in-stock", "preorder", "gone"] as const;
type Kind = (typeof KINDS)[number];
// расширяем тип массива, а не сужаем значение: врём только про то,
// что includes умеет искать любую строку — и это правда
function isKind(v: unknown): v is Kind {
  return typeof v === "string" && (KINDS as readonly string[]).includes(v);
}
const raw: unknown = "gone";
if (isKind(raw)) {
  console.log(raw.toUpperCase());
}
console.log(isKind("soon"));

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

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

В разборе, впрочем, и предикат не понадобится: switch по метке сужает даже unknown, а ветка default ловит всё незнакомое.

ts

type Availability =
  | { kind: "in-stock"; count: number }
  | { kind: "preorder"; releaseAt: string }
  | { kind: "gone" };
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseAvailability(v: unknown, path: string): Availability {
  if (!isRecord(v)) fail(path, "объект", v);
  const kind = v.kind;
  switch (kind) {
    case "in-stock":
      return { kind, count: asNumber(v.count, path + ".count") };
    case "preorder":
      return { kind, releaseAt: asString(v.releaseAt, path + ".releaseAt") };
    case "gone":
      return { kind };
    default:
      return fail(path + ".kind", "in-stock, preorder или gone", kind);
  }
}
console.log(parseAvailability(JSON.parse("{\"kind\": \"preorder\", \"releaseAt\": \"2026-10-01\"}"), "items[0].availability"));
console.log(parseAvailability(JSON.parse("{\"kind\": \"soon\"}"), "items[0].availability"));

type Availability =
  | { kind: "in-stock"; count: number }
  | { kind: "preorder"; releaseAt: string }
  | { kind: "gone" };
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseAvailability(v: unknown, path: string): Availability {
  if (!isRecord(v)) fail(path, "объект", v);
  const kind = v.kind;
  switch (kind) {
    case "in-stock":
      return { kind, count: asNumber(v.count, path + ".count") };
    case "preorder":
      return { kind, releaseAt: asString(v.releaseAt, path + ".releaseAt") };
    case "gone":
      return { kind };
    default:
      return fail(path + ".kind", "in-stock, preorder или gone", kind);
  }
}
console.log(parseAvailability(JSON.parse("{\"kind\": \"preorder\", \"releaseAt\": \"2026-10-01\"}"), "items[0].availability"));
console.log(parseAvailability(JSON.parse("{\"kind\": \"soon\"}"), "items[0].availability"));

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

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

Внутри каждой ветки kind уже не unknown, а конкретный литерал — поэтому короткая запись { kind, count: ... } собирает нужный вариант объединения без единого as. А default сообщает не «неверные данные», а какое именно значение метки оказалось незнакомым: чаще всего это новый вариант, который появился на сервере, но ещё не появился у вас.

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

ts

interface Product {
  id: string;
  title: string;
  price: number;
}
interface CatalogReport {
  items: Product[];
  skipped: string[];
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
  };
}
function parseCatalog(text: string): CatalogReport {
  let raw: unknown;
  try {
    raw = JSON.parse(text);
  } catch {
    fail("catalog", "корректный JSON", text.slice(0, 20));
  }
  if (!Array.isArray(raw)) fail("catalog", "массив", raw);
  const source: unknown[] = raw;
  const items: Product[] = [];
  const skipped: string[] = [];
  source.forEach((item, i) => {
    // в catch попадает unknown: бросить в JavaScript можно что угодно
    try {
      items.push(parseProduct(item, "catalog[" + i + "]"));
    } catch (error) {
      skipped.push(error instanceof Error ? error.message : String(error));
    }
  });
  return { items, skipped };
}
const report = parseCatalog("[{\"id\": \"p-1\", \"title\": \"Кружка\", \"price\": 1990}, {\"id\": \"p-2\", \"title\": \"Кофе\", \"price\": \"890\"}, 42]");
console.log(report.items.length);
console.log(report.skipped);

interface Product {
  id: string;
  title: string;
  price: number;
}
interface CatalogReport {
  items: Product[];
  skipped: string[];
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
  };
}
function parseCatalog(text: string): CatalogReport {
  let raw: unknown;
  try {
    raw = JSON.parse(text);
  } catch {
    fail("catalog", "корректный JSON", text.slice(0, 20));
  }
  if (!Array.isArray(raw)) fail("catalog", "массив", raw);
  const source: unknown[] = raw;
  const items: Product[] = [];
  const skipped: string[] = [];
  source.forEach((item, i) => {
    // в catch попадает unknown: бросить в JavaScript можно что угодно
    try {
      items.push(parseProduct(item, "catalog[" + i + "]"));
    } catch (error) {
      skipped.push(error instanceof Error ? error.message : String(error));
    }
  });
  return { items, skipped };
}
const report = parseCatalog("[{\"id\": \"p-1\", \"title\": \"Кружка\", \"price\": 1990}, {\"id\": \"p-2\", \"title\": \"Кофе\", \"price\": \"890\"}, 42]");
console.log(report.items.length);
console.log(report.skipped);

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

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

Каталог показывает то, что разобралось, а строки из skipped уходят в консоль, в баннер для редактора или в отчёт об ошибках. Где ставить границу «одна битая карточка — пропускаем, половина каталога битая — сдаёмся», решает сам проект; главное, что решение принимается здесь, а не случайно, где-то в глубине рендера.

И вот ради чего всё затевалось: ниже по коду report.items — это Product[], доказанный, а не обещанный. Никаких ?. на всякий случай, никаких as, никаких «а вдруг там строка». Рендер и настройки из следующих статей главы получают данные, форму которых уже никто не оспорит.

В настоящем проекте вместо ручных кирпичей часто берут библиотеку схем — Zod, Valibot и подобные. Схема описывается один раз, тип модели выводится из неё, а сообщения об ошибках с путями получаются сами. Плата — зависимость, вес в сборке и ещё один язык описания типов рядом с языком типов TypeScript.

Для каталога на три сотни строк ручной разбор дешевле и понятнее, и в песочнице учебника импортов всё равно нет. Но выбор между «своё» и «библиотека» — вопрос размера, а не принципа: механика внутри у них ровно та же самая, что мы только что написали.

У данных снаружи одна дверь: JSON.parse внутри разбора, аннотация unknown на входе и Product на выходе.
as — обещание, а не проверка: компилятор молчит, а падение приезжает далеко от места, где данные появились.
Разбор собирается из кирпичей: isRecord даёт Record<string, unknown>, а функция с типом never закрывает ветку без значения.
Путь к полю в сообщении (catalog[7].price) превращает «неверные данные» в ошибку, которую можно починить.
Аннотация возвращаемого типа делает модель сторожем разборщика: забытое поле — это TS2741, а не сюрприз в рендере.
Ошибку элемента ловят на уровне элемента: каталог отдаёт разобранные товары и отчёт о пропущенных, а не пустую страницу.

1/4Данные из JSON.parse сразу приводят: JSON.parse(text) as Product[]. В строке пришёл массив объектов без поля tags. Что произойдёт?

2/4Предикат isRecord вернул true для значения raw. Какого типа теперь выражение raw.price?

3/4Список меток объявлен как const KINDS = ["in-stock", "preorder", "gone"] as const. Почему KINDS.includes(v) для v: string не компилируется?

4/4У разборщика написан возвращаемый тип : Product, а в модель добавили новое обязательное поле. Что случится?

Необязательное поле

В модели у товара появилась необязательная скидка: discount?: number. Разберите её так, чтобы отсутствие поля было нормой, а неверный тип — ошибкой с путём. Сейчас скидка просто теряется, а null проходит незамеченным.

ts

interface Product {
  id: string;
  title: string;
  price: number;
  discount?: number;
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
    // ваш код: разобрать необязательное поле discount
  };
}
console.log(parseProduct({ id: "p-1", title: "Кружка", price: 1990 }, "items[0]"));
console.log(parseProduct({ id: "p-2", title: "Кофе", price: 890, discount: 10 }, "items[1]")); // скидка теряется
console.log(parseProduct({ id: "p-3", title: "Чай", price: 500, discount: null }, "items[2]")); // должно бросить

interface Product {
  id: string;
  title: string;
  price: number;
  discount?: number;
}
function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null && !Array.isArray(v);
}
function asString(v: unknown, path: string): string {
  return typeof v === "string" ? v : fail(path, "строка", v);
}
function asNumber(v: unknown, path: string): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
    // ваш код: разобрать необязательное поле discount
  };
}
console.log(parseProduct({ id: "p-1", title: "Кружка", price: 1990 }, "items[0]"));
console.log(parseProduct({ id: "p-2", title: "Кофе", price: 890, discount: 10 }, "items[1]")); // скидка теряется
console.log(parseProduct({ id: "p-3", title: "Чай", price: 500, discount: null }, "items[2]")); // должно бросить

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

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

Необязательное поле — это два случая, а не один: «поля нет» и «поле есть, но не то». Разводим их отдельным кирпичом, который отличается от asNumber ровно одной строкой.

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

function asOptionalNumber(v: unknown, path: string): number | undefined {
  return v === undefined ? undefined : asNumber(v, path);
}

function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price"),
    discount: asOptionalNumber(v.discount, path + ".discount")
  };
}

function asOptionalNumber(v: unknown, path: string): number | undefined {
  return v === undefined ? undefined : asNumber(v, path);
}

function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price"),
    discount: asOptionalNumber(v.discount, path + ".discount")
  };
}

Теперь { discount: null } честно падает с сообщением items[2].discount: ожидалось число, получено null: null — это не «поля нет», это неверное значение.

Один нюанс: у товара без скидки в объекте окажется discount: undefined — ключ есть, значение пустое. Для JSON.stringify и для проверок через in это не одно и то же, что отсутствие ключа. Если разница важна, поле добавляют через расширение:

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

return {
  id: asString(v.id, path + ".id"),
  title: asString(v.title, path + ".title"),
  price: asNumber(v.price, path + ".price"),
  ...(v.discount === undefined ? {} : { discount: asNumber(v.discount, path + ".discount") })
};

return {
  id: asString(v.id, path + ".id"),
  title: asString(v.title, path + ".title"),
  price: asNumber(v.price, path + ".price"),
  ...(v.discount === undefined ? {} : { discount: asNumber(v.discount, path + ".discount") })
};

Проверка, которая ничего не проверяет

Автор кода решил, что предиката по списку ключей достаточно. Компилятор доволен, а программа падает. Найдите, что именно предикат не проверяет, и перепишите его в честный разбор.

ts

interface Product {
  id: string;
  title: string;
  price: number;
}
// предикат «на глаз»: смотрит на ключи и ничего не знает про их значения
function looksLikeProduct(v: unknown): v is Product {
  return typeof v === "object" && v !== null && "id" in v && "title" in v && "price" in v;
}
const raw: unknown = JSON.parse("{\"id\": 1, \"title\": \"Кружка\", \"price\": \"1990\"}");
if (looksLikeProduct(raw)) {
  console.log(raw.title + " — " + raw.price.toFixed(2));
}

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

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

Подсказка: дыр здесь две, и обе — про значения, а не про ключи.

in отвечает только на вопрос «есть ли такой ключ», и ничего — на вопрос «что в нём лежит». В данных id — число, price — строка; предикат пропускает обоих, а toFixed на строке даёт TypeError: raw.price.toFixed is not a function. Компилятор поверил вам на слово: тело предиката он не сверяет с обещанием.

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

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

function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
  };
}

function parseProduct(v: unknown, path: string): Product {
  if (!isRecord(v)) fail(path, "объект", v);
  return {
    id: asString(v.id, path + ".id"),
    title: asString(v.title, path + ".title"),
    price: asNumber(v.price, path + ".price")
  };
}

Теперь ошибка приходит с адресом — items[0].id: ожидалось строка, получено 1 — и приходит на входе, а не в момент вывода на страницу.

Число, приехавшее строкой

Сервер каталога отдаёт цену строкой: "price": "1990". Менять его нельзя, а as запрещён. Научите asNumber принимать такую строку — но только если она целиком число: "12 рублей", "" и "abc" должны падать по-прежнему.

ts

function fail(path: string, expected: string, got: unknown): never {
  throw new TypeError(path + ": ожидалось " + expected + ", получено " + JSON.stringify(got));
}
function asNumber(v: unknown, path: string): number {
  // ваш код: принять и число, и строку, целиком состоящую из числа
  return typeof v === "number" && Number.isFinite(v) ? v : fail(path, "число", v);
}
console.log(asNumber(1990, "price")); // 1990
console.log(asNumber("1990", "price")); // должно быть 1990, а бросает

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

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

Приведение типа на границе — нормальный приём, если оно происходит в одном известном месте и остаётся строгим. Number("") даёт ноль, а не NaN, поэтому пустую строку отсекаем отдельно.

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

function asNumber(v: unknown, path: string): number {
  if (typeof v === "number" && Number.isFinite(v)) return v;
  if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) return Number(v);
  return fail(path, "число", v);
}

function asNumber(v: unknown, path: string): number {
  if (typeof v === "number" && Number.isFinite(v)) return v;
  if (typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v))) return Number(v);
  return fail(path, "число", v);
}

Проверьте на " 890 " — пройдёт, пробелы Number отбрасывает сам; на "12 рублей" — упадёт, потому что Number вернёт NaN. И заметьте, где живёт эта поблажка: в одном кирпиче разбора, а не в двадцати местах, где цену складывают и выводят.

Разбор входных данных: из unknown в модель

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

Одна дверь в программуСтрока входит, unknown выходит

Обещание против доказательстваas компилируется, а падает рендер

Кирпичи разбораisRecord, asString и функция, которая не возвращается

Поле за полем — и адрес ошибкиСообщение, по которому чинят данные

Метка из чужих данныхРазбор размеченного объединения

Одна битая карточка не роняет каталогОтчёт вместо исключения

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

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

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

Необязательное поле

Проверка, которая ничего не проверяет

Число, приехавшее строкой