Как читать диагностику: код TS####, текст, вложенные причины

Начнём с самой короткой диагностики, какая бывает. Что скажет компилятор — понятно; интереснее, что будет после того, как он это скажет.

let count: number = 0;
count = "три";
console.log(count);

В терминале эта же претензия печатается одной строкой: пример.ts(2,1): error TS2322: Тип "string" не может быть назначен для типа "number". Под примером песочница показывает укороченную версию — «строка 2» и текст. Номер TS2322 она опускает, но в редакторе и в выводе tsc он будет на месте, и дальше мы увидим, зачем он нужен.

Чтение начинают с номера строки, а не с текста: остальные части сообщения говорят про типы, и только он — про ваш файл.

И сразу главная неожиданность: диагностика была, а console.log всё равно напечатал «три». Так ведёт себя и tsc по умолчанию; к этому вернёмся в последнем разделе.

Два самых частых кода описывают одну и ту же беду в разных местах. TS2322 — значение кладут в переменную или свойство. TS2345 — значение передают в функцию.

function repeat(text: string, times: number): string {
  return text.repeat(times);
}

console.log(repeat("ха", "3"));

«Аргумент типа "string" нельзя назначить параметру типа "number"» — порядок слов всегда один: сначала то, что вы дали, потом то, чего ждали. А на исполнении всё сработало: repeat сам привёл «3» к числу, как это принято в JavaScript. Компилятор жалуется не на будущее падение, а на нарушенный договор.

function greet(name: string, greeting: string): string {
  return greeting + ", " + name;
}

console.log(greet("Рико"));

TS2554 говорит то же самое совсем без слова «тип»: «Ожидалось аргументов: 2, получено: 1». Это буквальная форма «ожидалось / получено», и она же объясняет вывод: greeting не получил значения и уехал в строку как undefined.

let flag: boolean = 1;
console.log(flag);

Когда сравниваются не два примитива, а две структуры, компилятор не ограничивается вердиктом: он показывает путь, которым до несовместимости дошёл.

type Product = { id: number; title: string; tags: string[] };

const mug = { id: 1, title: "Кружка", tags: [1, 2] };

function show(p: Product): void {
  console.log(p.title + ": " + p.tags.join(", "));
}

show(mug);

Цепочка читается как воронка, и уровней в ней столько, сколько шагов до виноватого места, — здесь их четыре. Верхний — общий вердикт: объект mug не годится на роль Product. Второй называет виноватое свойство: «Типы свойства "tags" несовместимы». Третий спускается внутрь этого свойства: массив чисел вместо массива строк. И только нижний говорит суть: где ждали строку, лежит число. Чинят по нижней строке, а место в коде ищут по имени свойства со второго уровня.

В песочнице цепочка склеена в одну строку — уровни видны по нарастающим пробелам. В терминале и редакторе те же уровни печатаются лесенкой.

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

type Point = { x: number; y: number };

const p: Point = { x: "1", y: "2" };

console.log(p.x + p.y);

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

type Handler = (value: number) => void;

const log: Handler = (value: string) => console.log(value.trim());

log(42);

Самая дорогая ошибка чтения — считать, что править надо там, где подчёркнуто. Отсюда берутся правки наугад: подогнать сигнатуру, добавить объединение, лишь бы подчёркивание пропало.

const settings = { retries: 3, timeout: "5s" };

function connect(options: { retries: number; timeout: number }): void {
  console.log("попыток " + options.retries + ", таймаут " + options.timeout);
}

connect(settings);

Подчёркнута строка 7, а опечатка — в строке 1, где timeout получил строку «5s». Компилятор молчал шесть строк не по невнимательности: сам по себе settings был совершенно законным объектом — просто не тем, который ждёт connect. Несовместимость появилась в момент встречи, там о ней и сообщили.

Имя виноватого свойства цепочка уже назвала — timeout. Дальше дело техники: найти, откуда оно берётся, и починить источник. Заметьте, что типов в первой строке не написано вовсе, а компилятор всё равно знает, что там строка; откуда — тема следующей статьи.

Прочитав цепочку, ищите по имени свойства, которое она назвала, а не по номеру строки из шапки.

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

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

const total = "199";

console.log(totl);
console.log(total * 2);

const flag: boolean = 1;

Три сообщения — три независимые беды: TS2552 про опечатку в имени, TS2362 про умножение строки, TS2322 про единицу вместо boolean. Выполнение при этом добралось только до третьей строки: totl не существует и для JavaScript, дальше ReferenceError и тишина.

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

TypeScript не запрещает запуск. tsc по умолчанию выдаёт JavaScript даже при ошибках — за это отвечает выключенный noEmitOnError, — а типы при переводе просто стираются. Песочница учебника ведёт себя так же, поэтому под примером всегда два голоса: сначала претензии компилятора, потом настоящий вывод.

const nums: number[] = [1, 2, 3];
const first: string = nums[0];

console.log(first.toUpperCase());

Диагностика на строке 2 оказалась предсказанием. Компилятор сказал: «здесь лежит не строка», — и последняя строка доказала это уже на исполнении. В этом смысле TS2322 — это TypeError, увиденный за минуту до запуска.

const user = { name: "Рико" };

console.log(user.nmae);

А здесь предсказание другое: падения нет, есть тихое undefined, которое поедет дальше по программе и всплывёт где-нибудь в разметке через десять функций. Компилятор говорит не «упадёт», а «вы описали не то» — и во втором случае это ценнее: TypeError вы бы и сами нашли.

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