Optional Chaining | .? | Typescript

• Optional Chaining | .? | Typescript

O Optional Chaining (?.) no TypeScript é uma maneira elegante e segura de acessar propriedades e métodos de objetos que podem ser undefined ou null, sem a necessidade de verificações manuais.

---

Uso com Propriedades

O Optional Chaining pode ser usado para acessar propriedades de objetos que podem não estar definidas:

const user = {
  name: "John",
  address: {
    city: "New York",
  },
};

// Acessando uma propriedade existente
console.log(user?.name); // John

// Acessando uma propriedade que não existe
console.log(user?.age); // undefined

// Encadeamento com propriedades aninhadas
console.log(user?.address?.city); // New York

// Tentando acessar uma propriedade em um objeto inexistente
console.log(user?.address?.postalCode); // undefined

---

Uso com Métodos

Você pode usar o Optional Chaining para chamar métodos que podem não existir no objeto. Se o método não existir, ele não será chamado, e o retorno será undefined.

const user = {
  greet: () => "Hello!",
};

// Chamando um método existente
console.log(user?.greet?.()); // Hello!

// Chamando um método que não existe
console.log(user?.sayGoodbye?.()); // undefined

---

Uso com Arrays

O Optional Chaining também funciona para verificar índices de arrays.

const users = [{ name: "Alice" }, { name: "Bob" }];

// Acessando um índice existente
console.log(users[0]?.name); // Alice

// Acessando um índice que não existe
console.log(users[10]?.name); // undefined

---

Combinação com Operadores Lógicos

O Optional Chaining é frequentemente combinado com operadores lógicos para fornecer valores padrão ou evitar erros.

const user = {
  name: "John",
  preferences: null,
};

// Usando ?? para fornecer um valor padrão
console.log(user?.preferences?.theme ?? "default-theme"); // default-theme

---

Cuidados

1. O Optional Chaining só evita erros ao tentar acessar propriedades/métodos de objetos que podem ser null ou undefined. Outros tipos de erros (como tentativa de acessar propriedades de algo que não é um objeto) ainda podem ocorrer.

const user = null;

// Isso funciona
console.log(user?.name); // undefined

// Isso lança um erro (porque user não é um objeto)
console.log(user.name); // Erro: Cannot read property 'name' of null

2. Use o Optional Chaining com moderação, especialmente em objetos muito complexos, pois pode dificultar a depuração.

---

Exemplo Prático

type User = {
  id: number;
  profile?: {
    bio?: string;
    getDisplayName?: () => string;
  };
};

const user: User = {
  id: 1,
  profile: {
    bio: "Developer",
  },
};

// Acessando bio (existe)
console.log(user.profile?.bio); // Developer

// Chamando um método que pode não existir
console.log(user.profile?.getDisplayName?.()); // undefined

// Acessando uma propriedade que não existe
console.log(user.profile?.avatarUrl); // undefined

O Optional Chaining é uma ferramenta poderosa no TypeScript para lidar com objetos complexos ou com propriedades/métodos opcionais de maneira segura e legível.