Functions and Function Types

Learning objectives#

• Annotate parameters and return types
• Describe a function’s type with (a: A) => R
• Type callback parameters
• Write overloads for functions with several call shapes

Explanation#

Annotate each parameter: function add(a: number, b: number): number. The return type is optional (it is inferred) but useful on exported functions.

A function type expression describes any function with that signature: type Formatter = (value: number) => string.

Use function types for callbacks: function onSave(callback: (id: number) => void). Any matching function can be passed.

A callback typed to return void may still return a value — it is simply ignored. That is why arr.forEach(x => list.push(x)) is allowed.

Overloads list several signatures above one implementation, for functions that accept different argument shapes and return different types.

Syntax#

1function greet(name: string): string { … }
2const add = (a: number, b: number): number => a + b;
3type Handler = (event: MouseEvent) => void;

Code example: Typed functions, callbacks and overloads#

1const add = (a: number, b: number): number => a + b;
2

3type Formatter = (value: number) => string;
4const rupees: Formatter = v => `₹${v.toFixed(2)}`;
5const percent: Formatter = v => `${Math.round(v * 100)}%`;
6

7function formatAll(values: number[], format: Formatter): string[] {
8  return values.map(format);
9}
10

11formatAll([10, 99.5], rupees);         // [ '₹10.00', '₹99.50' ]
12formatAll([0.25], percent);            // [ '25%' ]
13formatAll([1], (v: string) => v);      // ✗ Type 'number' is not assignable to type 'string'
14

15function retry(task: () => Promise<void>, times: number): Promise<void> {
16  return task().catch(err => (times > 1 ? retry(task, times - 1) : Promise.reject(err)));
17}
18

19// Overloads: one name, two call shapes
20function parse(input: string): number;
21function parse(input: string[]): number[];
22function parse(input: string | string[]): number | number[] {
23  return Array.isArray(input) ? input.map(Number) : Number(input);
24}
25const one = parse('42');          // number
26const many = parse(['1', '2']);   // number[]

formatAll returns [ '₹10.00', '₹99.50' ] and [ '25%' ]. The callback with a string parameter is rejected. parse('42') is typed as number and parse(['1','2']) as number[].

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. add has typed parameters and an explicit return type.
2. Formatter is a reusable function type; rupees and percent both match it.
3. formatAll accepts any Formatter as a callback.
4. A callback with the wrong parameter type is rejected.
5. retry takes a function returning a promise — common for network calls.
6. The two overload signatures give callers precise return types.

Real-world use case#

Common mistakes#

Best practices#

• Always type parameters
• Add return types to exported/public functions
• Name reusable signatures with type aliases
• Prefer union parameters or generics over many overloads

Remember this#

Practice exercise#

1type Validator = (value: string) => string | null;
2

3const required: Validator = v => (v.trim() ? null : 'Required');
4const minLen = (n: number): Validator => v => (v.length >= n ? null : `At least ${n} characters`);
5

6function validateAll(value: string, validators: Validator[]): string | null {
7  for (const check of validators) {
8    const error = check(value);
9    if (error) return error;
10  }
11  return null;
12}
13validateAll('ab', [required, minLen(3)]); // 'At least 3 characters'

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.