Как читать ошибки TypeScript: полный гид для новичков без боли и паники

Есть два типа разработчиков.

👨‍💻 Первый видит ошибку:

Type 'string' is not assignable to type 'number'

И спокойно её исправляет.

👀 Второй видит:

TS2322: Type '{ name: string; age: number; }' is not assignable to type 'User & Record<string, never> & ...'

Закрывает ноутбук, идёт делать чай и начинает задумываться, не поздно ли сменить профессию.

Если ты пока относишься ко второму типу — всё нормально. Проблема не в TypeScript и не в твоих способностях. Просто тебя ещё никто не учил правильно читать ошибки.

Почему ошибки TypeScript выглядят такими страшными? 🤯

TypeScript старается объяснить не только саму проблему, но и весь путь, по которому он к ней пришёл.

Он может показать:

• какой тип ожидался;

• какой тип был получен;

• какие свойства отсутствуют;

• какие типы несовместимы;

• в каком файле и на какой строке появилась проблема;

• через какие интерфейсы, объединения и дженерики прошла проверка.

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

🎯 Главное правило: не пытайся понять всё сразу

Ошибку TypeScript нужно читать не как книгу сверху вниз, а как отчёт следователя.

Сначала найди ответы на три вопроса:

1. Что ожидалось?

2. Что было получено?

3. Где именно это произошло?

Например:

Type 'string' is not assignable to type 'number'

Перевод с языка TypeScript на человеческий:

«Я ожидал число, но ты передал строку».

Вот и всё. Никакой мистики.

Как разбирать ошибку по частям 🔍

1. Найди проблемный тип

Обычно в сообщении есть два главных участника:

Type 'string' is not assignable to type 'number'

string — то, что ты передал.

number — то, что ожидал TypeScript.

2. Найди имя свойства или аргумента

Если ошибка длинная, ищи конкретное название:

Property 'email' does not exist on type 'User'

Здесь ключевое слово — email. Значит, проблема связана именно с этим свойством, а не со всем объектом целиком.

3. Посмотри на строку кода

Редактор обычно подчёркивает место, где TypeScript заметил проблему. Но важно понимать: место, где ошибка проявилась, и место, где она появилась, могут отличаться.

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

4. Читай вложенные ошибки снизу вверх

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

Сверху TypeScript пишет:

Argument of type 'UserResponse' is not assignable to parameter of type 'User'

А ниже уточняет:

Property 'email' is missing in type 'UserResponse'

Первая строка говорит: «объекты несовместимы».

Вторая объясняет почему: «не хватает email».

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

Самые популярные ошибки TypeScript простыми словами

❌ Type 'string' is not assignable to type 'number'

let age: number = "18";

Ты обещал TypeScript число, а передал строку.

Исправление:

let age: number = 18;

Или преобразование значения:

const age: number = Number("18");

❌ Argument of type ... is not assignable to parameter of type ...

function setAge(age: number) {
 console.log(age);
}
setAge("18");

Функция ожидает number, а получает string.

TypeScript буквально сообщает: «Этот аргумент не подходит этому параметру».

❌ Property does not exist on type

interface User {
 name: string;
}
const user: User = {name: "Макс"};
console.log(user.email);

В типе User нет свойства email.

Возможные причины:

• ты допустил опечатку;

• забыл добавить свойство в интерфейс;

• используешь объект не того типа;

• поле действительно может отсутствовать.

❌ Object is possibly 'undefined'

interface User {
 address?: {
  city: string;
 };
}
console.log(user.address.city);

TypeScript предупреждает: address может отсутствовать.

Исправить можно через optional chaining:

console.log(user.address?.city);

Или проверкой:

if (user.address) {
 console.log(user.address.city);
}

Это не придирка. TypeScript защищает тебя от ошибки, которая иначе появилась бы уже у пользователя.

❌ Cannot find name

Cannot find name 'username'

Компилятор не знает, что такое username.

Обычно причина банальна:

• переменная не объявлена;

• название написано с ошибкой;

• забыт импорт;

• переменная находится вне области видимости;

• нужный код уже удалили, а обращение к нему осталось.

❌ Type '{}' is missing the following properties

interface User {
 name: string;
 age: number;
}
const user: User = {};

Ты пообещал полноценного пользователя, но передал пустой объект.

TypeScript не вредничает. Он просто спрашивает: «А где всё остальное?»

Исправление:

const user: User = {
 name: "Лена",
 age: 24
};

❌ Type 'undefined' is not assignable to type

const users: string[] = [];
const firstUser: string = users[0];

Массив может быть пустым, поэтому первого элемента может не существовать.

Безопаснее проверить значение:

const firstUser = users[0];
if (firstUser) {
 console.log(firstUser);
}

Что означают TS2322, TS2345 и другие номера? 🚨

Коды вроде TS2322 или TS2345 выглядят как предупреждение о запуске ракеты, но это всего лишь номера категорий ошибок.

TS2322 часто появляется, когда одно значение нельзя присвоить другому типу.

const count: number = "10";

TS2345 обычно означает, что в функцию передали аргумент неподходящего типа.

function double(value: number) {
 return value * 2;
}
double("10");

Сам номер редко помогает исправить код напрямую. Гораздо важнее текст после него.

Не исправляй ошибку с помощью any 🙈

Новичок видит красное подчёркивание и пишет:

const data: any = response;

Ошибка исчезает.

Новичок счастлив.

TypeScript тихо собирает вещи и уходит из проекта.

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

Лучше описать реальную структуру данных:

interface UserResponse {
 id: number;
 name: string;
 email: string;
}
const data: UserResponse = response;

Почему ошибка иногда указывает не туда?

TypeScript показывает место, где заметил несовместимость. Но настоящая причина может находиться раньше.

const user = {
 name: "Аня",
 age: "25"
};
saveUser(user);

Ошибка может подсветить вызов saveUser(user), хотя неправильное значение записано в свойстве age.

Поэтому проверяй не только подчёркнутую строку, но и данные, которые в неё приходят.

Алгоритм чтения любой ошибки TypeScript 🧠

1. Не паникуй и не читай всю простыню сразу.

2. Найди файл и строку, где проявилась ошибка.

3. Определи, какой тип ожидался.

4. Определи, какой тип был получен.

5. Найди конкретное несовместимое свойство.

6. Проверь, где создаётся проблемное значение.

7. Исправь причину, а не маскируй её через any или необдуманный as.

8. Перезапусти проверку и посмотри, не исчезли ли связанные ошибки.

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

Используй подсказки редактора 💡

VS Code и другие редакторы могут:

• добавить отсутствующий импорт;

• показать ожидаемый тип;

• создать недостающее свойство;

• предложить проверку на undefined;

• показать сигнатуру функции;

• перейти к определению типа.

Наведи курсор на подчёркнутый код и используй быстрое исправление:

Ctrl + .

На macOS:

Cmd + .

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

Стоит ли копировать ошибку в ChatGPT или поисковик?

Да, но вместе с контекстом.

Плохой запрос:

Как исправить TS2322?

Хороший запрос:

Почему TypeScript пишет "Type 'string' is not assignable to type 'number'" в этом коде? Поле age приходит из input как строка.

Ещё лучше приложить небольшой фрагмент кода, интерфейс и ожидаемое поведение.

Главное — не вставлять исправление механически. Сначала попробуй объяснить самому себе, почему оно работает. Иначе ты не исправляешь ошибку, а просто временно арендуешь чужое понимание.

Как быстрее научиться понимать TypeScript 🚀

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

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

А в нашем Telegram-сообществе регулярно выходят полезные посты, разборы, задачи и советы для разработчиков. Это удобный способ повторять программирование небольшими порциями, сохранять мотивацию и не выпадать из обучения. 💙

Итоги

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

В большинстве случаев нужно понять всего две вещи:

Какой тип ожидался и какой тип был передан вместо него?

Не бойся длинных сообщений. Ищи конкретное свойство, сравнивай типы и проверяй место, где создаются данные.

Однажды ты увидишь TS2322 и вместо паники подумаешь:

«Ага, опять строку пытаются выдать за число. Сейчас починим».

И вот тогда TypeScript окончательно перестанет быть боссом уровня и станет твоим напарником. 😎