Encadeamento Opcional no TypeScript

Neste artigo, explicamos sobre o Encadeamento Opcional no TypeScript.

YouTube Video

Encadeamento Opcional no TypeScript

O encadeamento opcional no TypeScript é uma funcionalidade útil para acessar propriedades de objetos ou arrays profundamente aninhados. Essa funcionalidade evita erros ao acessar propriedades inexistentes, permitindo que você escreva um código conciso e legível.

O que é Encadeamento Opcional?

O operador de encadeamento opcional (?.) retorna undefined ao acessar uma propriedade ou um método de objeto que não existe. Isso permite que o código continue sendo executado sem lançar um erro caso a propriedade não exista.

Por exemplo, ao acessar propriedades de um objeto aninhado como mostrado abaixo, ocorre um erro se a propriedade não existir usando o método usual.

Exemplo

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined

• Nesse caso, ocorrerá um erro se address não existir. O encadeamento opcional pode ser usado para evitar isso.

Exemplo usando optional chaining

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined

• O uso de encadeamento opcional evita erros e retorna undefined quando as propriedades não existem.

Como Usar o Encadeamento Opcional

O encadeamento opcional pode ser usado em vários cenários, como acesso a propriedades, chamadas de função e acesso a arrays. Explicaremos como usar cada um desses casos.

Acesso a Propriedades

Você pode acessar com segurança as propriedades aninhadas de objetos.

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

Este código utiliza encadeamento opcional para acessar as propriedades city e country somente se a propriedade location existir no objeto company.

Chamadas de Função

O encadeamento opcional também pode verificar a existência de uma função antes de chamá-la.

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

Este código utiliza encadeamento opcional para invocar de forma segura a função greet somente se ela existir. Não ocorre nenhum erro mesmo que a função esteja indefinida.

Acesso a Arrays

O encadeamento opcional pode ser aplicado a arrays para verificar se os elementos existem.

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

Este código acessa os elementos do array somente se team.members existir, retornando o valor para índices existentes e undefined para os que não existem.

Encadeamento Opcional e o Operador de Coalescência Nula

O encadeamento opcional retorna undefined, mas às vezes isso não é suficiente. Neste caso, o operador de coalescência nula (??), introduzido no TypeScript 3.7, pode ser utilizado para fornecer valores padrão para null ou undefined.

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

Quando combinado com a encadeação opcional, você pode escrever um código ainda mais flexível.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Cuidados ao Usar a Encadeação Opcional

Ao utilizar encadeamento opcional, é importante ter os seguintes pontos em mente:.

• Uso desnecessário do encadeamento opcional

  • Usar encadeamento opcional em propriedades ou métodos que estão garantidos a existir pode tornar seu código desnecessariamente verboso. É melhor usá-la apenas quando a existência do alvo acessado for incerta.

• Erros tipográficos

  • O uso excessivo do encadeamento opcional pode dificultar a identificação de erros tipográficos que resultam no acesso a propriedades não intencionais. Realize verificações de tipo adequadas e use-a com cautela.

Resumo do código

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Resumo

A encadeação opcional no TypeScript oferece um código conciso enquanto evita erros ao acessar objetos ou arrays profundamente aninhados. Além disso, combiná-lo com o operador de coalescência nula permite definir valores padrão e criar uma lógica mais flexível. Quando usada de forma adequada, ela pode melhorar significativamente a segurança e a legibilidade do código.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video