contextual Contextual Typing
Last updated: 2026-10-22
contextual Contextual Typing
Contextual typing: when a function literal sits in a position whose type is already known (a variable annotation, an array method callback, an event handler), TS works the parameter types backwards — no annotations needed. In map((o) => o.id), o is typed not from the function itself but from the array's element type, i.e. the context.
| 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 orders: Order[] = [];
// o gets its contextual type Order from the array's element type
const summaries = orders.map((o) => `#${o.id}: ${o.total}`);
// A variable annotation provides context too
type ClickHandler = (event: { x: number; y: number }) => void;
const onClick: ClickHandler = (event) => console.log(event.x, event.y);⚙️ Parameters
| const x: T = ... | Positions that trigger it: variable/parameter annotations, array elements, call arguments (via the formal parameter type), return expressions (against the declared return type) |
|---|---|
| (x) => ... | Untyped callback parameters receive the contextual type; explicit annotations must match it or error |
Returns：return expressions are context-checked too: the declared return type validates each return, catching missing branches early.
▶ Example
Edit the code below and click Try it to see the transpiled result:
Output：
#101: 250, #102: 90, #103: 480
2
click @ 12,34
(Runtime output after transpilation; a typo like o.pric inside the callback is an immediate compile error — the contextual type forbids it)💡 Notes
ℹ️ Info Contextual typing flows types outside-in, opposite to ordinary inference (expression to variable); when both apply, the explicit annotation wins.
💡 Tip An "implicitly any" callback parameter usually means the context is missing (the array was never typed) — fix the outer type instead of annotating the callback.
⚠️ Note Callbacks like React's onChange={(e) => ...} lean on contextual types; once extracted (e.g. wrapped in useCallback) you must add the annotation yourself or parameters degrade to any.
🏷️ Related Functions & Classes
💡 Related cases
More cases coming soon.
❓ FAQ
Q Are contextual typing and type inference the same thing?
A No. Ordinary inference goes value → type (const x = 5 is number); contextual typing goes position → value — the target type is known first and parameter types flow backwards. Callback parameters almost always come from the latter.
Q Why is my map callback parameter any?
A The array itself is untyped (e.g. from JSON.parse or a missing annotation), so there is no context to borrow from. Type the array's elements and it heals.
Q Does contextual typing let errors slip through?
A Quite the opposite — it is the basis for checking. Accessing a property outside the contextual type errors immediately (extra fields too), which is exactly how it catches typos.
