Arrow functions & contextual typing
Use arrow functions confidently and see how contextual typing infers parameter/return types from usage.
Arrow functions & contextual typing is a free TypeScript Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why arrows & context?
Arrow functions give concise syntax and lexical this. With contextual typing, TypeScript infers parameter and return types from usage (e.g., array methods), so you write less boilerplate while keeping safety.
Arrow basics
Annotate parameters/returns when it improves clarity. Arrows are compact and keep the surrounding this (unlike function declarations).
// Arrow syntax: parameters => expression/body
const greet = (name: string): string => {
return `Hello, ${name}`;
};
console.log(greet("Ada"));Context via map
Contextual typing: map knows the element type, so the arrow parameter is inferred as number and the result as number[].
// Context supplies types: numbers.map expects (n:number)=>number
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // n inferred as number
console.log(doubled);Inferred returns
Typed APIs (Promise, array methods) drive inference for parameters and return values, reducing the need for explicit annotations.
// Promise.then infers the callback parameter and return type
const toLength = (s: string) => s.length;
Promise.resolve("TS")
.then(s => toLength(s)) // s inferred as string
.then(len => console.log(len));Optionals & defaults
Arrows support default and optional parameters. Narrow or provide fallbacks (e.g., ??) before using optionals.
// Optional + default with arrows
const padLeft = (text: string, width = 2, ch?: string): string => {
const fill = (ch ?? " ").repeat(Math.max(0, width));
return fill + text;
};
console.log(padLeft("X")); // default width 2, default char " "
console.log(padLeft("X", 4, "."));Pitfalls
Pitfalls:
- Over-annotating breaks inference; start minimal.
- Be explicit when APIs are untyped (any) or when intent is unclear.
- Remember arrows capture this lexically—great for callbacks, but avoid when a dynamic this is required.
Contextual typing check
Quick check: What does “contextual typing” mean for arrow functions?
Recap & next
Recap: Arrow functions give concise syntax and lexical this. Contextual typing lets usage drive inference, so callbacks stay short yet type-safe.
Frequently asked questions
Is the “Arrow functions & contextual typing” lesson free?
Yes — the full text of “Arrow functions & contextual typing” is free to read here on the web, and the TypeScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Arrow functions & contextual typing”?
Use arrow functions confidently and see how contextual typing infers parameter/return types from usage. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Arrow functions & contextual typing” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- If/else, switch, loops; truthiness & strict checks
- Functions: params, default/optional/rest; return types
- Arrow functions & contextual typing