(arg) => R Tipos de funções arrow
Última atualização: 2026-10-22
(arg) => R Tipos de funções arrow
Funções arrow têm sintaxe de anotação embutida: dois-pontos após os parâmetros, e a expressão é o valor de retorno. Declare o tipo de função da variável e os parâmetros/retornos do corpo se vinculam automaticamente — o estilo recomendado para callbacks pontuais como comparadores.
| Grupo | Funções e Classes |
|---|---|
| Tipo | Sintaxe |
| Modo strict | Nã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 byPriceAsc: (a: Product, b: Product) => number = (a, b) => a.price - b.price;
// Arrow function genérica (em arquivos .tsx escreva <T,> para evitar ambiguidade com JSX)
const identity = <T,>(v: T): T => v;⚙️ Parâmetros
| (a: Product, b: Product) => number | O tipo de função da variável: a/b na implementação recebem os tipos automaticamente |
|---|---|
| <T,>(v: T): T | Arrow genérica: os parâmetros de tipo precedem a lista de parâmetros; a vírgula final desambigua em .tsx |
Retorno：Corpos de expressão retornam o tipo da expressão; corpos de bloco usam return, com anotação de retorno explícita opcional.
▶ Exemplo
Edite o código abaixo e clique em Testar para ver o resultado transpilado:
Saída：
Mouse:89 | Keyboard:199 | Monitor:899
(Saída de execução após a transpilação; um comparador booleano (a.price < b.price) é um erro de tipo — o sort espera number)💡 Observações
ℹ️ Info Funções arrow não têm this próprio: callbacks e handlers usam o this do entorno — a diferença de tempo de execução mais importante em relação às funções comuns.
⚠️ Atenção Envolva literais de objeto em um corpo de expressão: () => ({ key: v }). Escrever () => { key: v } é interpretado como bloco e retorna undefined.
💡 Dica Retorne a.price - b.price (negativo/zero/positivo) para ordem crescente; nunca booleanos — subtrair booleanos até funciona, mas por acidente, e é um erro de tipo.
🏷️ Funções e Classes Relacionadas
💡 Casos relacionados
Mais casos em breve.
📚 Tutoriais relacionados
❓ Perguntas frequentes
P Funções arrow e comuns são tipadas de forma diferente?
R Idênticas no nível de tipo: (params) => returnType nos dois casos. As diferenças estão na semântica de tempo de execução (this, arguments, construtibilidade).
P Por que <T>(v: T) falha em arquivos .tsx?
R Os colchetes angulares genéricos conflitam com tags JSX. Escreva <T,> (vírgula final) ou <T extends unknown> para desambiguar.
P Quando anotar o tipo de uma variável que é função arrow?
R Quando atribuída a uma variável, armazenada em um objeto ou exportada — a anotação alimenta o contextual typing do corpo. Em posições inline com tipos de parâmetro conhecidos (sort(byPriceAsc)) não é preciso.
