0Pricing
TypeScript Academy · Aula

Chamadas e Acesso a Elementos Opcionais

Utilize ?.() e ?.[] para chamadas seguras de métodos e indexação.

Chamadas e Acesso a Elementos Opcionais é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 4 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.

Além do acesso a propriedades

O encadeamento opcional não se limita a obj?.prop. Ele tem mais duas formas: chamadas opcionais com ?.() e acesso opcional a elementos com ?.[index]. Ambas interrompem a avaliação ao encontrar um valor nulo ou indefinido, assim como o acesso a propriedades.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

Chamadas opcionais de métodos

Use obj.method?.() para chamar um método somente se ele existir. Se method for null ou undefined, a chamada será ignorada e a expressão resultará em undefined.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

Onde posicionar o ?.

O ?. fica imediatamente antes dos parênteses da chamada. obj.method?.() verifica método, não obj. Para proteger obj também, escreva obj?.method?.().

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

Chamando funções de retorno opcionais

Um uso muito comum é invocar um parâmetro de função de retorno opcional. Em vez de fazer uma verificação com if, escreva callback?.() para chamá-lo somente quando ele for fornecido.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

Acesso opcional a elementos

Para vetores ou assinaturas de índice que podem ser nulos ou indefinidos, use arr?.[index]. Se arr for nulo ou indefinido, o acesso interromperá a avaliação; caso contrário, o elemento será lido normalmente.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Acesso a elementos com chaves dinâmicas

O acesso opcional a elementos também funciona com a notação de colchetes para chaves dinâmicas ou calculadas em um objeto que pode ser nulo ou indefinido.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Combinando acesso a elementos e chamadas

Você pode combinar livremente as formas. Acesse um vetor opcional e, em seguida, chame opcionalmente um método do elemento — cada ?. protege sua própria etapa.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

Encadeamento opcional com resultados de funções

Você pode continuar o encadeamento a partir de qualquer valor retornado por uma função. Se a função produzir um valor nulo ou indefinido, as chamadas ou os acessos seguintes interromperão a avaliação com segurança.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

O tipo do resultado inclui undefined

Assim como nos encadeamentos de propriedades, as chamadas opcionais e o acesso a elementos adicionam undefined ao tipo do resultado. Combine-os com ?? para fornecer um valor padrão e remover o undefined.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Protegendo manipuladores de eventos

No código da interface do usuário e de eventos, as chamadas opcionais invocam elegantemente manipuladores que talvez não estejam definidos. Sem verificações de existência extensas e sem falhas quando o manipulador está ausente.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Exemplo de um despachante de plug-ins

Reunindo tudo: um despachante que invoca opcionalmente um gancho nomeado de plug-in a partir de um registro possivelmente esparso, usando um resultado padrão quando nada o trata.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Verificação rápida

Teste sua compreensão das chamadas opcionais e do acesso a elementos.

Recapitulação: chamadas e acesso opcionais

Você aprendeu as outras formas do encadeamento opcional:

  • obj.method?.() chama um método somente se ele existir.
  • arr?.[index] lê com segurança um elemento de um contêiner que pode ser nulo ou indefinido.
  • Todas as formas interrompem a avaliação e resultam em undefined quando o operando é nulo ou indefinido.
  • Combine-as com ?? para definir um valor padrão para o resultado.

Próximo curso: fundamentos de readonly e imutabilidade.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Perguntas Frequentes

A aula “Chamadas e Acesso a Elementos Opcionais” é grátis?

Sim — o texto completo de “Chamadas e Acesso a Elementos Opcionais” é 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 “Chamadas e Acesso a Elementos Opcionais”?

Utilize ?.() e ?.[] para chamadas seguras de métodos e indexação. 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 4 de 4.

Quanto tempo leva a aula “Chamadas e Acesso a Elementos Opcionais”?

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