Ошибка TypeError: что это и как её исправить

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

TypeError: Cannot read properties of null/undefined

Что означает: вы пытаетесь обратиться к свойству объекта, который имеет значение null или undefined.

Пример: объявим переменную, но не присвоим ей значение. Если вызовем метод toUpperCase() или любой другой на такой переменной, появится ошибка TypeError:

let name;
name.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined

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

TypeError: Cannot convert undefined/null to object

Что означает: вы используете null или undefined в качестве объекта.

Пример: попробуем использовать функцию Object.keys(), чтобы получить массив ключей объекта obj. Но так как переменная obj имеет значение undefined и не является массивом, возникнет ошибка TypeError:

let obj = undefined;
let result = Object.keys(obj); // TypeError: Cannot convert undefined to object

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

TypeError: x is not a function

Что означает: вы неправильно использовали функцию или передали неверные аргументы.

Пример: попытаемся вызвать переменную numbers как функцию. Но так как это обычный массив, мы получим TypeError:

const numbers = [1, 2, 3];
numbers(); // TypeError: numbers is not a function

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

TypeError: x is not iterable

Что означает: вы пытаетесь выполнить итерацию (например, с помощью цикла for...of) по значению, которое не является итерируемым (например, массивом или строкой).

Пример: выполним итерацию по значению x. Но так как это число, итерация не может быть выполнена — появится ошибка TypeError:

const x = 123;
for (let item of x) { // TypeError: x is not iterable
  console.log(item);
}

Что делать: проверьте тип данных. Возможно, их стоит преобразовать в другой формат.

Как обработать ошибку TypeError. Конструкция try...catch

Ошибки в коде опасны: если их не обработать, интерпретатор не сможет дальше читать код. В результате весь JavaScript, что находится ниже, просто не выполнится.

Чтобы ничего не сломалось, разработчики используют конструкцию try...catch. Она помогает поймать и обработать ошибки и защищает программу от аварийного завершения.

Как использовать конструкцию:

try {
  //Место, где может появиться ошибка
  let name;
  name.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined
} catch (error) {
  // Дополнительные действия для обработки ошибки
  console.log("Произошла ошибка:", error.message);
}

Внутри блока try находится код, который может вызвать ошибку. Если что-то пойдёт не так и мы столкнёмся с TypeError, выполнение программы перейдёт в блок catch. Здесь мы можем выполнить любые действия, например, вывести ошибку в консоль или показать пользователю модальное окно с просьбой перезагрузить страницу.

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

Как избежать ошибок типа TypeError

1. Перед выполнением операций внимательно проверяйте типы данных переменных.
2. Используйте условный оператор if для проверки, определена ли переменная, прежде чем вызывать методы или выполнять операции с ней.
3. При работе с функциями проверяйте, что передаваемые аргументы имеют правильный тип данных.
4. Используйте инструменты разработчика — особенно полезна консоль — чтобы отслеживать и исправлять ошибки типа TypeError.

Следуя этим советам, можно значительно сократить риски появления ошибок TypeError и повысить надёжность и корректность вашего JavaScript-кода.

Материалы по теме

• TypeScript. Зачем он нужен и почему так популярен
• Туториал. Список задач с drag & drop
• 12 полезных книг по JavaScript

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.