Как использовать необязательную цепочку и нулевое объединение с TypeScript и React

Как правильно использовать Optional Chaining и Nullish Coalescing с TypeScript и React

вступление

Проблема, которую мы пытаемся решить: было ли у вас когда-нибудь глубоко вложенное свойство в объекте, которое каждый раз, когда вы ссылаетесь на него, возвращал null, потому что оно не было определено достаточно быстро до запуска вашего кода? Обычно с вызовом API, но не ограничиваясь этим. В зависимости от того, насколько глубоко было свойство, вам пришлось написать несколько уродливых операторов if, чтобы предотвратить ошибку? Что ж, это то, что мы собираемся решить сегодня с помощью Optional Chaining.

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

Как кратко обсуждается во вступлении, звездой показа в необязательной цепочке является новый оператор (?.), который позволяет вам захватывать значение свойства, расположенное глубоко внутри цепочки связанных объектов, не проверяя, что каждый собственность в цепочке действительна.

Перед необязательной цепочкой для доступа к глубоко вложенному свойству вам нужно будет сделать что-то вроде этого.

if(object && object.property && object.property.nextProperty) {
setProperty(object.property.nextProperty.finalProperty)
}

Благодаря необязательному связыванию теперь вы можете избавиться от всего этого кода с помощью этого простого добавления.

setPropert(object.property.nextProperty?.finalProperty)

Оператор (?.) аналогичен широко используемому оператору (.) вместо того, чтобы создавать ошибку, если значение или ссылка вашего вложенного свойства имеет значение NULL (null или undefined ), выражение замыкается с возвращаемым значением undefined.

Необязательная цепочка также может использоваться в функциях для возврата undefined, если данная функция не существует.

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

Это также может быть полезно, когда вы исследуете объект, и у них нет гарантии того, какие свойства требуются.

И последнее, но не менее важное: при необходимости вы можете использовать несколько дополнительных операторов цепочки.

object.property?.nextProperty?.finalProperty

Нулевое слияние

Следующая звезда шоу - нулевой оператор объединения (??). Этот логический оператор возвращает значение в правой части, если его левый операнд равен нулю или не определен. Вы думаете, о чем я думаю? Это будет отлично работать с Optional Chaining.

object.person?.details?.car ?? "Person Has No Car"

В отличие от более часто используемого оператора, логическое ИЛИ (||) возвращает правое значение, если операнд представляет собой любое ложное значение, а не только null или undefined. Чтобы сделать это более очевидным, если вы используете логический оператор ИЛИ для предоставления значения по умолчанию, вы можете столкнуться с неожиданным поведением, если вы сочтете некоторые ложные значения пригодными для использования (например: «или 0).

Давайте рассмотрим пример, в котором правое значение равно 0.

let count = 0;
let orOperand = count || 42;
let nullishOperand = count ?? 42;

console.log(orOperand)
console.log(nullishOperand);
result-
logical OR: 42
nullish coalescing: O

Вы можете увидеть здесь в этом примере с нулевым оператором объединения, поскольку счетчик не является неопределенным или нулевым, он возвращает левое значение. Если используется логическое ИЛИ, 0 рассматривается как ложное значение и возвращается правое значение.

Теперь давайте рассмотрим пример, в котором правое значение не определено.

let count = undefined;
let orOperand = count || 42;
let nullishOperand = count ?? 42;
console.log(orOperand)
console.log(nullishOperand);
result-
logical OR: 42
nullish coalescing: 42

Это наглядный пример того, насколько выгодно нулевое слияние.

Пример React и TypeScript

В мире Reactjs и TypeScript это может быть полезно по-разному, я хотел предоставить пример типизированного интерфейсного объекта, который, как мы ожидаем, иногда будет иметь значение NULL.

Затем создал объект с этими типами и передал значение null.

Здесь, в console.log (), вы можете ожидать, что он вернет значение по умолчанию «Master Bath Unkown».

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

Важные примечания

Также важно отметить, что, поскольку это новые функции JavaScript, их поддерживают только определенные версии React и TypeScript.

В последней версии ECMAScript (ECMA-262) были представлены эти функции.

Поддерживается в:

• TypeScript 3.7
• Babel 7.8.0
• Создать приложение React 3.3.0

Заключение

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

Ознакомьтесь с некоторыми из моих других популярных статей:

Больше контента на plainenglish.io