Веб-сайт 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 и настройте дополнительные плагины, чтобы использовать их сейчас. Давайте будем выбрасывать немного меньше ошибок во время выполнения с нашими выражениями.