TypeScript: Null и Undefined
В TypeScript null и undefined не просто значения. Это два типа, которые состоят из одного значения. Представим, если бы TypeScript работал так же, как JavaScript. Тогда эти значения можно было бы передавать в любом месте. И неважно, что там ожидается: строка, массив и тому подобное.
Все было бы хорошо, пока не пришло время выполнения кода. В этот момент мы бы получили ошибку, потому что внутри функции ожидался бы массив, а пришел null или undefined. Такая проблема, например, существует в JavaScript:
function foo(value) {
const upperValue = value.toUpperCase();
// остальная логика
}
foo(null); // Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
В статически типизированных языках, где null используется как общий тип для всего, проверка типов ничего не подскажет. В таком случае возникает исключение NullPointerException — одно из самых запоминающихся для всех пользователей. Поэтому код начинает обрастать проверками на null:
public void doSomething(SomeObject obj) {
if(obj != null) {
obj.myMethod();
}
}
doSomething(null);
Данный пример на Java показывает, что null может быть передан в любое место, где ожидается объект. Поэтому внутри функции мы должны проверить, что obj не равен null. Если бы мы не сделали этой проверки, то получили бы исключение NullPointerException.
В TypeScript c правильной (strict) конфигурацией подобная проверка встроена, и статический анализатор скажет о возможной проблеме:
function foo(value?: string | null) {
const upperValue = value.toUpperCase(); // Object is possibly 'null' or 'undefined'.
// остальная логика
}
В данном случае мы получили ошибку компиляции, потому что value может быть null или undefined.
Чтобы ее решить, нужно написать соответствующее условие или использовать оператор ?.. Это позволяет избежать ошибок во время исполнения кода:
function foo(value?: string | null) {
if (value !== null && value !== undefined) {
const upperValue = value.toUpperCase(); // (parameter) value: string
}
// остальная логика
}
Это стало возможным благодаря выделению значений null и undefined в отдельные типы. Благодаря каждой проверке мы отсекаем не подходящее нам множество значений и получаем безопасный вызов метода. Такие проверки также называются отсечением типов (Differentiating Types) и Type Guards.
Задание
Реализуйте функцию formatPrice(), которая принимает число и возвращает строку с округлением до второго числа после запятой. Если пришел null или undefined должна вернуться '$0.00'.
formatPrice(3.145); // '$3.15'
formatPrice(200); // '$200.00'
formatPrice(); // '$0.00'
formatPrice(null); // '$0.00'
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.