0Pricing
TypeScript Academy · Aula

Encadeamento Opcional com ?.

Acesse com segurança propriedades profundamente aninhadas que podem ser null.

Encadeamento Opcional com ?. é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

O operador de encadeamento opcional

O encadeamento opcional (?.) permite acessar com segurança uma propriedade que pode estar em um valor null ou undefined. Se o valor for nulo ou indefinido, a expressão inteira faz um curto-circuito para undefined em vez de lançar uma exceção.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Curto-circuito em valores nulos ou indefinidos

Quando o operando antes de ?. é null ou undefined, a avaliação para imediatamente e retorna undefined. O restante da cadeia nunca é executado.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Encadeando vários níveis

Você pode colocar ?. em cada etapa incerta de um acesso profundo. Qualquer ligação nula ou indefinida faz um curto-circuito em toda a cadeia, protegendo você contra erros de “não é possível ler a propriedade de indefinido”.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

O tipo do resultado inclui undefined

Como a cadeia pode produzir undefined, o TypeScript adiciona undefined ao tipo do resultado. Se o tipo da propriedade era string, o resultado encadeado será string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Tratando o resultado undefined

Como o resultado pode ser undefined, normalmente você o verifica ou fornece uma alternativa. O sistema de tipos lembra você de tratar o caso ausente.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Comparação com cadeias de &&

Antes de ?., os desenvolvedores escreviam longas cadeias de &&: a && a.b && a.b.c. O encadeamento opcional expressa a mesma intenção de forma muito mais concisa e pode ser lido de cima para baixo.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Por que ?. é melhor que &&

A abordagem com && trata qualquer valor falso (0, '', false) como um ponto de parada, o que pode ser um erro. O encadeamento opcional para somente em null ou undefined, que geralmente é o comportamento desejado.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Encadeamento opcional em matrizes de objetos

O encadeamento opcional funciona com qualquer acesso a propriedade. Combinado com o acesso a elementos, ele alcança com segurança matrizes aninhadas de objetos.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

O curto-circuito interrompe a expressão inteira

Depois que uma cadeia faz um curto-circuito, até os acessos a propriedades escritos depois dela (sem ?.) são ignorados. A expressão inteira é avaliada como undefined de uma só vez.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Encadeamento opcional com retornos de funções

Você pode continuar o encadeamento a partir do resultado de uma chamada de função. Se a função retornar um valor nulo ou indefinido, o acesso seguinte fará um curto-circuito com segurança.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Um exemplo prático de configuração

O encadeamento opcional é especialmente útil ao ler configurações com campos que podem faltar ou respostas de interfaces de programação em que campos aninhados podem estar ausentes. Ele mantém o acesso legível e livre de falhas.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Verificação rápida

Teste sua compreensão sobre o encadeamento opcional.

Recapitulação: encadeamento opcional

Você aprendeu que ?.:

  • Acessa com segurança propriedades de valores possivelmente null/undefined.
  • Faz um curto-circuito na expressão inteira, resultando em undefined quando encontra uma ligação nula ou indefinida.
  • Adiciona undefined ao tipo do resultado.
  • É melhor que as cadeias de &&, pois para apenas em valores nulos ou indefinidos, não em todos os valores falsos.

A seguir, o operador de coalescência de nulos.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Perguntas Frequentes

A aula “Encadeamento Opcional com ?.” é grátis?

Sim — o texto completo de “Encadeamento Opcional com ?.” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Encadeamento Opcional com ?.”?

Acesse com segurança propriedades profundamente aninhadas que podem ser null. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Encadeamento Opcional com ?.”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Encadeamento Opcional com ?.
  2. Coalescência de Nulos com ??
  3. Combinando ?. e ??
  4. Chamadas e Acesso a Elementos Opcionais
← Voltar para TypeScript Academy