Typescript: optional chaining

Optional chaining

Um recurso bastante útil do typescript(v3.7) é o optional chaining, ele é uma maneira de simplificar o acesso a valores de objetos aninhados quando é possível que uma referência ou função seja indefinida ou nula.

Para entender melhor, vamos usar um exemplo:

let user = {nome: '', email: '', address: null};
let street = user.address.street; // Error

O trecho de código acima irá lançar um erro:

`Uncaught TypeError: Cannot read property 'street' of null`

Isso acontece por que estamos tentando acessar uma propriedade ou chamar um método em um objeto null ou undefined. Fazendo uma verificação conseguimos resolver esse problema:

let user = {nome: '’, email: '’, address: null};
if (user && user.address && user.address.street) {
  let street = user.address.street;
  console.log(street) // undefined
}

Usando o optional chaining mas conhecido como “?.”, essa sintaxe se torna bem mais enxuta.
O código acima pode ser escrito da seguinte maneira:

let user = {nome: '', email: '', address: null};
let street = user?.address?.street;
console.log(street) // undefined

Outro recurso é o operador de coalescência nula “??”, ele é uma forma de retornar um valor padrão quando lidarmos com um null ou undefined.

Vamos combiná-lo com o optional chaining, reescrevendo nosso código:

let user = {nome: '', email: '', address: null};
let street = user?.address?.street ?? 'address not found'; 
console.log(street) // "address not found"

Como podemos notar o uso desses recursos nos ajuda a reduzir a quantidade de código, simplificando a leitura e a manutenção.

Referências

Handbook - TypeScript 3.7

Encadeamento opcional