TypeScript Academy · Aula

Combinando ?. e ??

Combine o encadeamento opcional com valores padrão adequados.

Combinando ?. e ?? é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 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.

Uma combinação perfeita

O encadeamento opcional e a coalescência de nulos foram feitos para funcionar em conjunto. O padrão obj?.value ?? fallback lê com segurança um valor aninhado e fornece um padrão caso ele esteja ausente. É uma das expressões idiomáticas mais úteis do TypeScript moderno.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Como o padrão funciona

Primeiro, ?. avalia a cadeia, produzindo o valor ou undefined. Em seguida, ?? verifica esse resultado: se ele for nulo ou indefinido, o valor alternativo será usado. Dois operadores, uma expressão simples.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

O tipo do resultado

A cadeia produz T | undefined; ?? remove undefined e combina o tipo do valor alternativo por meio de uma união. Com um valor alternativo compatível, o tipo final é apenas T — não resta nenhum undefined para tratar.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Preservando valores falsos válidos

Como ?? só é acionado para valores nulos ou indefinidos, um 0 legítimo obtido pela cadeia é preservado. O valor alternativo só é aplicado quando a propriedade realmente está ausente.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Acessando configurações profundamente aninhadas

Para configurações profundamente aninhadas, encadeie várias etapas com ?. e finalize com um único ??. Qualquer elo ausente recorre corretamente ao valor padrão.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Valores padrão em respostas de API

As respostas de API frequentemente omitem campos opcionais. O padrão combinado faz uma leitura defensiva e substitui esses campos por valores padrão sensatos, mantendo o código posterior simples e livre de falhas.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Combinando com resultados de métodos

Você pode encadear chamadas de funções ou métodos e definir valores padrão para seus resultados. Se a chamada retornar um valor nulo ou indefinido, o valor alternativo será usado.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Evitando verificações extensas

Antes desses operadores, você escreveria verificações de nulos em várias linhas. O padrão combinado substitui um bloco inteiro por uma única expressão, melhorando a legibilidade sem perder segurança.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Recorrendo a outra consulta

O valor alternativo depois de ?? também pode ser outra consulta encadeada, permitindo tentar uma fonte secundária antes de chegar a um valor literal padrão.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Combinando com acesso a elementos

O padrão também funciona com o acesso a elementos de uma matriz: leia um elemento por meio de ?.[i] e defina um valor padrão com ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Um leitor de configurações do mundo real

Juntando tudo: um leitor de configurações que percorre com segurança camadas opcionais e garante um valor utilizável. Este é o TypeScript de produção que você escreverá com frequência.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Verificação rápida

Teste seu entendimento sobre a combinação de ?. e ??.

Recapitulação: combinando ?. e ??

Você aprendeu o padrão obj?.value ?? fallback:

?. percorre a cadeia com segurança, produzindo o valor ou undefined.
?? fornece um valor padrão somente quando o resultado é nulo ou indefinido.
O tipo final elimina undefined, tornando-se frequentemente um T simples.
Valores falsos válidos, como 0, são preservados.

A seguir, chamadas opcionais e acesso opcional a elementos.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Perguntas Frequentes

A aula “Combinando ?. e ??” é grátis?

Sim — o texto completo de “Combinando ?. e ??” é 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 “Combinando ?. e ??”?

Combine o encadeamento opcional com valores padrão adequados. 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 3 de 4.

Quanto tempo leva a aula “Combinando ?. e ??”?

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

← Voltar para TypeScript Academy