Tipagem contextual: inferência a partir do contexto
Entenda como TypeScript infere tipos a partir do contexto ao redor
Tipagem contextual: inferência a partir do contexto é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 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 que é tipagem contextual?
A tipagem contextual ocorre quando o TypeScript infere o tipo de uma expressão com base na posição em que ela aparece — o contexto fornece o tipo, e não o próprio valor.
document.addEventListener("click", (e) => {
// e is inferred as MouseEvent from the event type
console.log(e.clientX);
});Tipagem contextual em retornos de chamada
Quando você passa um retorno de chamada para uma função tipada, o TypeScript infere os tipos dos parâmetros a partir da assinatura esperada do retorno de chamada.
const nums = [1, 2, 3];
nums.forEach((n) => {
// n inferred as number from Array<number>
console.log(n.toFixed(2));
});Tipagem contextual e literais de objeto
Quando um literal de objeto é atribuído a uma variável tipada, os tipos de suas propriedades são inferidos a partir desse tipo, permitindo verificações precisas.
interface Config { timeout: number; retries: number; }
const config: Config = {
timeout: 3000,
retries: 3,
// extra: true // Error: excess property
};Tipagem contextual em JSX
No React, as propriedades de manipuladores de eventos são tipadas contextualmente, portanto os tipos dos parâmetros de eventos são inferidos automaticamente.
function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />Tipagem contextual versus anotações explícitas
A tipagem contextual é poderosa, mas pode ser substituída por anotações explícitas. Quando ambas estão presentes, a explícita prevalece sobre a contextual.
const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)Tipagem contextual com desestruturação
Os parâmetros desestruturados em funções tipadas contextualmente também herdam seus tipos do contexto.
const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
// key: string, value: number — contextually typed
console.log(key.toUpperCase(), value * 2);
});Tipagem contextual e tipos de retorno
Quando uma função é atribuída a uma variável tipada, o tipo de retorno também é inferido contextualmente.
type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OKTipagem contextual em expressões condicionais
O TypeScript pode propagar tipos contextuais para expressões ternárias e operadores lógicos.
const result: string | null =
Math.random() > 0.5 ? "yes" : null; // both arms typed by contextLimitações da tipagem contextual
A tipagem contextual não se aplica quando a expressão está em uma posição não contextual, como uma variável independente sem anotação.
const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;Inferência bidirecional
O TypeScript realiza inferência de tipos bidirecional: de cima para baixo, pelo contexto, e de baixo para cima, a partir da expressão. As duas abordagens cooperam para fornecer o tipo mais preciso possível.
function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as stringRecapitulação: tipagem contextual
A tipagem contextual permite que o TypeScript infira tipos a partir da posição em que uma expressão é usada — retornos de chamada, atribuições, propriedades JSX e desestruturação se beneficiam desse mecanismo de inferência.
Verificação rápida
Quando a tipagem contextual se aplica a um parâmetro de retorno de chamada?
O que você aprendeu
A tipagem contextual consiste em o TypeScript inferir tipos a partir da posição, e não do valor. Ela torna retornos de chamada, manipuladores de eventos e atribuições tipadas concisos, mantendo a segurança de tipos.
Perguntas Frequentes
A aula “Tipagem contextual: inferência a partir do contexto” é grátis?
Sim — o texto completo de “Tipagem contextual: inferência a partir do contexto” é 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 “Tipagem contextual: inferência a partir do contexto”?
Entenda como TypeScript infere tipos a partir do contexto ao redor 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 2 de 4.
Quanto tempo leva a aula “Tipagem contextual: inferência a partir do contexto”?
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
- Mecânicas de ampliação e restrição de tipos
- Tipagem contextual: inferência a partir do contexto
- Verificação de propriedades excedentes e atualidade
- Asserções const e as const