Серия: Как понять и использовать JavaScript и TypeScript

null и undefined в JavaScript

В JavaScript есть два примитивных значения, которые используются для обозначения отсутствующих или неинициализированных значений: null и undefined. Это два из «шести ложных значений» в JavaScript.

null имеет две особенности:

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

undefined с другой стороны:

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

Теперь в TypeScript у нас есть типы с теми же именами, которые соответствуют этим примитивам. Они контролируются флагом компилятора под названием strictNullChecks. Как ведут себя эти типы и как нам нужно программировать наш код, зависит от того, как мы настроим этот флаг. По умолчанию для параметра strictNullChecks установлено значение false.

Что происходит, когда strictNullChecks имеет значение false

Если для этого флага компилятора объявлено значение false или если TypeScript остается в конфигурации по умолчанию для этого флага компилятора, применяются следующие правила.

  1. переменные, которые могут содержать значение null или undefined, по-прежнему доступны
  2. значения null и undefined по-прежнему могут быть присвоены переменным

Что происходит, когда strictNullChecks имеет значение true

Если для флага компилятора установлено значение true, нам нужно будет проверить или протестировать переменную, чтобы определить, является ли ее значение null или undefined, прежде чем что-либо делать с этой переменной.

Почему мы хотим этого? Просто… если значение было определено как null или undefined, а затем мы попытались запустить функцию или получить доступ к его свойству в простом JavaScript, мы получили бы ошибку. И вы будете удивлены, узнав, сколько подобных ошибок существует в коде. Ниже приведены несколько способов защитного программирования нашего кода для обработки таких ситуаций.

Как мы можем проверить наличие null и undefined в нашем коде

Вариант №1, можно использовать простую проверку на правдивость.

const message: string | null = "hi"
if (message) {
  // do nothing
} else {
  console.log("What is the message? " + message)
}

Вариант № 2, если мы работаем с объектом, мы можем использовать необязательный оператор цепочки JavaScript (?.), чтобы проверить, является ли переменная или функция null или undefined.

В Javascript, если переменная или функция имеет значение null или undefined, будет возвращено значение undefined.

const person = {
  firstName: "John",
  lastName: "Doe"
};
console.log(person.address?.state);
// prints undefined
console.log(person.getFullAddress?.());
// prints undefined

В TypeScript вы получите ошибки.

const person = {
  firstName: "John",
  lastName: "Doe"
};
console.log(person.address?.state);
// Property 'address' does not exist on type '{ firstName: string; // lastName: string; }'.
console.log(person.getFullAddress?.());
// Property 'getFullAddress' does not exist on type '{ firstName: 
// string; lastName: string; }'.

Вариант № 3, мы можем явно указать компилятору TypeScript, что значение будет содержать что-то отличное от null или undefined, используя оператор утверждения Non-Null (!). Это специальный синтаксис TypeScript, и он эффективно сообщает компилятору, что значение не является нулевым или неопределенным. Это эквивалентно отключению проверки нулей во время компиляции и может быть опасным!

function printText(text?: string | null) {
  console.log(text!.toUpperCase());
}
printText();

Есть несколько других способов проверить или обработать, является ли переменная или функция null или undefined. Все они предназначены для конкретных случаев использования и основаны на использовании одного из вышеперечисленных методов наряду с использованием утверждений или выдачи ошибок.

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

В моей следующей статье «Узнайте, как создавать отказоустойчивый код JavaScript с помощью сужения TypeScript». Мы изучим несколько методов использования системы типов и несколько функций JavaScript для написания кода. TypeScript может лучше анализировать и обеспечивать большую устойчивость.

Надеюсь, вы нашли эту статью понятной и информативной. Пожалуйста, продолжайте возвращаться в этот блог, чтобы узнать больше о тонкостях, сложностях и нюансах JavaScript и TypeScript. Как всегда, оставьте комментарий и дайте мне знать, если что-то нужно добавить, вычесть или исправить.