Веб-сайт Typescript определяет необязательную цепочку как

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

Как разработчики JavaScript, мы часто работаем с глубоко вложенными объектами JSON. Если данные получены из REST API, то вы, скорее всего, зависите от бэкэнда, чтобы убедиться, что ваш ответ соответствует ожидаемому формату, иначе мы столкнемся с ошибками во время выполнения. при выполнении выражений для этих объектов.

рассмотрим следующий пример

const person = {
  name: {
    first: {
      text: "Santosh"
    }
  },
  pets: ['cat', 'dog']
}
console.log(person.name.first.text.length); // logs the length of firstname
console.log(person.name.last.text.length); // throws an Error

Здесь, во втором журнале, person.name.last равно undefined, и выражение пытается оценить свойство text для undefined, что выдает ошибку.

Чтобы справиться с этим случаем, я обычно делаю

console.log(person && person.name && 
    person.name.last && 
    person.name.last.text && 
    person.name.last.text.length); // doesn't throw any error. logs undefined instead

Я проверяю дочернее свойство, прежде чем получить к нему доступ, но это немного беспорядочно. С появлением необязательных цепочек мы можем сделать это вместо этого.

console.log(person?.name?.last?.text.length); // logs undefined

Довольно чисто и просто, правда? ⛓

Вы также можете использовать это для массивов и функций.

console.log(person.cars[3]); // throws an Error

с дополнительной цепочкой вы можете выполнить безопасную проверку

console.log(person?.cars?.[3]); // doesn't throw an error, logs undefined instead

Включение дополнительной цепочки в Chrome 79+

Согласно MDN, только Chrome 79+ и Opera 65+ имеют экспериментальную поддержку опциональной цепочки, которая должна быть сначала включена в браузере.

В Chrome

  • откройте URL-адрес chrome://flags в браузере Chrome
  • Включить флаг Experimental JavaScript из доступных экспериментов

Текущий статус

  • Предложение по необязательной цепочке достигло стадии 4 (на сегодняшний день, январь 2020 г.) процесса TC39. 🙏

Активный статус предложения можно посмотреть в этом репозитории здесь.

Настройка с помощью Babel

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

Инструкцию по установке вы можете найти здесь.

Внутренне Babel транспилирует следующий код

console.log(person?.name?.last?.text.length);

to

var _person$name, _person$name$last;
console.log(person === null
  || person === void 0 ? void 0 : (_person$name = person.name) === null
  || _person$name === void 0 ? void 0 : (_person$name$last = _person$name.last) === null
  || _person$name$last === void 0 ? void 0 : _person$name$last.text.length);

Если вы думаете о том, что, черт возьми, такое void 0, то рекомендую вам пройти эту статью. В основном он оценивается как undefined . Теперь еще раз взгляните на приведенный выше код, чтобы понять его.

В любой момент, если вложенное свойство имеет значение null или undefined, выражение оценивается как undefined.

Необязательная цепочка в машинописном тексте

Я рад, что все продвигаются вперед с необязательными цепочками намного быстрее, чем ожидалось. Typescript 3.7 теперь поддерживает необязательную цепочку. 🙌

Вы можете найти примечания к выпуску здесь.

Давайте посмотрим, как TypeScript-код опциональной цепочки преобразуется в JavaScript.

console.log(person?.name?.last?.text.length);

Я использовал инструмент командной строки tsc для компиляции приведенного выше кода TS, и транспилированный код был

var _a, _b, _c;
console.log((_c = (_b = (_a = person) === null 
  || _a === void 0 ? void 0 : _a.name) === null 
  || _b === void 0 ? void 0 : _b.last) === null 
  || _c === void 0 ? void 0 : _c.text.length);

Это почти то же самое, что мы видели в транспилированном коде Babel. Объект person проверяется на каждом уровне своей вложенной структуры, чтобы увидеть, существует ли следующий key в этом выражении, иначе он возвращает undefined, а не выдает ошибку.

Необязательная цепочка в VS Code

Если бы вы использовали более старую версию VS Code в качестве редактора при запуске нескольких приведенных выше примеров кода, тогда ваша IDE выдала бы вам ошибки.

Хорошие новости: версия VS Code 1.41 теперь поддерживает опциональную цепочку. Спасибо Typescript 3.7 (так они сказали). 💪 Подробнее о релизе можно узнать здесь.

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