Программирование с ИИ
ENRU
Г

Частые ошибки JS, TypeScript и Dart

три языка, одни и те же грабли

Что это

Сообщения JavaScript и TypeScript получены запуском (Node 22, TypeScript 5.8). Сообщения Dart приведены по памяти и не прогонялись — как и вся глава 11, они требуют проверки по документации.

JavaScript во время работы

TypeError: Cannot read properties of undefined (reading 'name') Самая частая ошибка во всём фронтенде. Обратились к полю того, чего нет: данные ещё не пришли, ключ называется иначе, массив пуст. Лечится проверкой или ?., но сначала надо понять, почему там undefined.

TypeError: Cannot read properties of undefined (reading 'map') То же самое в React: отрисовали список до того, как пришли данные. Признак того, что состояние «загрузка» не сделано (статья 10.5).

TypeError: Cannot set properties of null (setting 'textContent') Элемент не найден. Скрипт выполнился раньше, чем браузер построил страницу, или селектор не тот.

TypeError: xs.push2 is not a function Метода не существует. Опечатка — или выдуманный метод (статья 4.8).

TypeError: d is not iterable Перебирают то, что не массив: undefined, объект, null.

TypeError: Assignment to constant variable. Присвоили значение const. Менять содержимое объекта можно, саму переменную — нет.

ReferenceError: cuty is not defined Имени не существует. В отличие от Python, в браузере это иногда означает, что скрипт не загрузился.

SyntaxError: Unexpected end of JSON input JSON.parse от пустой строки. Обычно ответ сервера пуст, потому что запрос не дошёл.

SyntaxError: await is only valid in async functions and the top level bodies of modules await в обычной функции. Либо делать функцию async, либо работать через .then.

TypeError: Failed to fetch Запрос не состоялся. В коде ошибки нет: настоящая причина — в консоли браузера, чаще всего CORS (статья 14.3).

TypeScript при проверке

error TS2741: Property 'temp' is missing in type '{ name: string; }' but required in type 'City' Не хватает поля. Либо поле должно быть необязательным (temp?), либо его действительно забыли.

error TS2322: Type 'string' is not assignable to type 'number' Значение не того типа. Классика — число, пришедшее строкой.

error TS2345: Argument of type 'number' is not assignable to parameter of type 'string' То же самое в аргументе функции.

error TS18048: 'd' is possibly 'undefined' Значение может отсутствовать, а обращаются к нему напрямую. Правильный ответ — проверка, а не ! (статья 9.5).

error TS18047: 'c.temp' is possibly 'null' То же для null. Появляется именно там, где типы описаны честно, — и это признак хорошего кода, а не проблемы.

error TS2339: Property 'b' does not exist on type '{ a: number; }' Поля нет в типе. Либо опечатка, либо тип описан не полностью — и тогда исправлять надо тип, а не затыкать as any.

Dart и Flutter

Null check operator used on a null value Поставили ! там, где значение оказалось пустым. Прямой аналог as в TypeScript и такая же заглушка (статья 11.2).

LateInitializationError: Field 'x' has not been initialized Поле объявлено через late, но присвоить забыли.

setState() called after dispose() Виджет уже удалён, а ответ из сети пришёл и пытается обновить экран. Признак того, что подписку не закрыли в dispose (статья 11.4).

RenderFlex overflowed by N pixels Та самая жёлто-чёрная полоса: содержимое не помещается. Лечится Expanded или Flexible (статья 11.3).

The method 'X' isn't defined for the type 'Y' Метода нет. Во Flutter это чаще всего означает код для другой версии: главная болезнь стека.

Что общего

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

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

Шпаргалка

  • Читай последнюю строку: она говорит, что случилось.

  • undefined (reading '...') — данные ещё не пришли или ключ другой.

  • Failed to fetch — причина в консоли браузера, а не в коде.

  • possibly 'undefined' в TypeScript — признак честных типов, а не проблемы.

  • ! в Dart и as в TypeScript — одинаковые заглушки.

  • Почти всё в списке — одна ошибка: обращение к тому, чего нет.