(arg) => R Arrow Function Types
Last updated: 2026-10-22
(arg) => R Arrow Function Types
Arrow functions have built-in annotation syntax: a colon after parameters, and the expression is the return value. Declare the variable's function type and the body's parameters/returns link automatically — the recommended style for one-off callbacks like comparators.
| Group | Functions & Classes |
|---|---|
| Kind | Syntax |
| Strict mode | Not required |
ℹ️ Info The editor transpiles TypeScript to JavaScript and runs it (no type checking); see each example's Output for type-check results.
📝 Syntax
const byPriceAsc: (a: Product, b: Product) => number = (a, b) => a.price - b.price;
// Generic arrow (.tsx files need <T,> to avoid JSX ambiguity)
const identity = <T,>(v: T): T => v;⚙️ Parameters
| (a: Product, b: Product) => number | The variable's function type: a/b in the implementation get their types automatically |
|---|---|
| <T,>(v: T): T | Generic arrow: type parameters precede the parameter list; the trailing comma disambiguates in .tsx |
Returns：Expression bodies return the expression's type; block bodies use return, with an optional explicit return annotation.
▶ Example
Edit the code below and click Try it to see the transpiled result:
Output：
Mouse:89 | Keyboard:199 | Monitor:899
(Runtime output after transpilation; a boolean comparator (a.price < b.price) is a type error — sort expects number)💡 Notes
ℹ️ Info Arrow functions have no own this: callbacks and handlers use the surrounding this — the key runtime difference from ordinary functions.
⚠️ Note Wrap object literals in an expression body: () => ({ key: v }). Writing () => { key: v } parses as a block and returns undefined.
💡 Tip Return a.price - b.price (negative/zero/positive) for ascending order; never booleans — subtracting booleans works by accident and is a type error anyway.
🏷️ Related Functions & Classes
💡 Related cases
More cases coming soon.
📚 Related tutorials
❓ FAQ
Q Do arrow and ordinary functions type differently?
A Identical at the type level: (params) => returnType either way. Differences are runtime semantics (this, arguments, constructibility).
Q Why does <T>(v: T) fail in .tsx files?
A The generic angle brackets collide with JSX tags. Write <T,> (trailing comma) or <T extends unknown> to disambiguate.
Q When should an arrow function variable be annotated?
A When assigned to a variable, stored in an object, or exported — the annotation feeds contextual typing into the body. Inline positions with known parameter types (sort(byPriceAsc)) need none.
