English 中文 العربية 日本語 Português

contextual Tipagem contextual

Última atualização: 2026-10-22

contextual Tipagem contextual

Tipagem contextual: quando um literal de função está numa posição cujo tipo já é conhecido (anotação de variável, callback de método de array, handler de evento), o TS deduz os tipos dos parâmetros de trás para frente — sem precisar de anotações. Em map((o) => o.id), o tem tipo não pela função em si, mas pelo tipo dos elementos do array, ou seja, pelo contexto.

GrupoFunções e Classes
TipoSintaxe
Modo strictNão necessário

ℹ️ Info O editor transpila TypeScript para JavaScript e o executa (sem verificação de tipos); veja a Saída de cada exemplo para o resultado da verificação.

📝 Sintaxe

const orders: Order[] = [];

// O parâmetro o do callback obtém o tipo contextual Order do tipo de elemento de orders
const summaries = orders.map((o) => `#${o.id}: ${o.total}`);

// A anotação de variável também fornece contexto
type ClickHandler = (event: { x: number; y: number }) => void;
const onClick: ClickHandler = (event) => console.log(event.x, event.y);

⚙️ Parâmetros

const x: T = ...Posições que o disparam: anotações de variável/parâmetro, elementos de array, argumentos de chamada (via o tipo do parâmetro formal), expressões return (contra o tipo de retorno declarado)
(x) => ...Parâmetros de callback sem tipo recebem o tipo contextual; anotações explícitas precisam ser compatíveis com ele ou geram erro

Retorno：Expressões return também são verificadas pelo contexto: o tipo de retorno declarado valida cada return, pegando cedo ramificações que faltaram.

▶ Exemplo

Edite o código abaixo e clique em Testar para ver o resultado transpilado:

Saída：

#101: 250, #102: 90, #103: 480
2
click @ 12,34

(Saída de execução após a transpilação; escrever o.pric (nome de propriedade errado) no callback gera erro de compilação imediato — o tipo contextual não permite)
▶ Testar

💡 Observações

ℹ️ Info A tipagem contextual faz os tipos fluírem de fora para dentro, o oposto da inferência comum (da expressão para a variável); quando ambas se aplicam, a anotação explícita vence.
💡 Dica Um parâmetro de callback "implicitamente any" geralmente significa que falta o contexto (o array nunca foi tipado) — corrija o tipo externo em vez de anotar o callback.
⚠️ Atenção Callbacks como o onChange={(e) => ...} do React dependem de tipos contextuais; ao extraí-los (por exemplo, envolvendo em useCallback), você mesmo precisa adicionar a anotação, ou os parâmetros degradam para any.
function-type-expressions narrowing-basics
Mais casos em breve.

❓ Perguntas frequentes

P Tipagem contextual e inferência de tipos são a mesma coisa?
R Não. A inferência comum vai do valor para o tipo (const x = 5 é number); a tipagem contextual vai da posição para o valor — o tipo alvo é conhecido primeiro e os tipos dos parâmetros fluem de trás para frente. Parâmetros de callback quase sempre vêm da segunda.
P Por que o parâmetro do meu callback no map é any?
R O próprio array não tem tipo (por exemplo, vindo de JSON.parse ou sem anotação), então não há contexto de onde emprestar. Tipifique os elementos do array e isso se resolve.
P A tipagem contextual deixa erros passarem?
R Pelo contrário — ela é a base da verificação. Acessar uma propriedade fora do tipo contextual gera erro imediato (campos extras também), e é justamente assim que ela pega erros de digitação.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%