Higher-order function types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a higher-order function in TypeScript?

A higher-order function is a function that takes another function as an argument or returns a function as its result.

beginner

How do you type a function that takes another function as a parameter in TypeScript?

You specify the parameter as a function type, for example: <br><code>function example(fn: (x: number) => string): void { ... }</code> means <code>fn</code> is a function taking a number and returning a string.

beginner

How do you type a function that returns another function in TypeScript?

You specify the return type as a function type, for example: <br><code>function create(): (x: number) => string { return x => x.toString(); }</code> means <code>create</code> returns a function that takes a number and returns a string.

intermediate

What is the type of a function that takes a function and returns a function?

It is a higher-order function type, for example:
(fn: (a: number) => string) => (b: string) => number means it takes a function from number to string and returns a function from string to number.

intermediate

Why are higher-order function types useful in TypeScript?

They help describe complex function behaviors clearly, enable better type safety, and improve code readability by explicitly showing how functions interact with other functions.

Which of the following is a correct type for a function that takes a function from number to string as a parameter?

A number => (x: string) => void

B (fn: string) => number

C (fn: (x: number) => string) => void

D (x: number) => string

Option C correctly types a function that takes another function (from number to string) as a parameter.

How do you type a function that returns a function taking a boolean and returning a number?

A () => (flag: boolean) => number

B (flag: boolean) => number

C () => boolean => number

D (flag: boolean) => () => number

Option A correctly shows a function returning another function that takes a boolean and returns a number.

What does this type mean? (fn: () => void) => () => void

A A function that takes a number and returns a string

B A function that returns void

C A function that takes no parameters and returns void

D A function that takes a function with no parameters and no return, and returns a function with no parameters and no return

This type describes a higher-order function taking a function and returning a function, both with no parameters and no return value.

Which is NOT a characteristic of higher-order functions?

A They can take functions as arguments

B They always return numbers

C They can return functions

D They help create reusable code

Higher-order functions do not always return numbers; they can return any type, including functions.

Why is typing higher-order functions important in TypeScript?

A To ensure functions are used correctly and catch errors early

B To make code run faster

C To avoid using functions

D To make code shorter

Typing higher-order functions helps catch mistakes early and ensures correct usage of functions.

Explain what a higher-order function type is and give an example in TypeScript.

Think about functions that work with other functions as inputs or outputs.

Describe how you would type a function that takes a callback function and returns a new function in TypeScript.

Focus on the input and output being functions.

Practice

1. What is a higher-order function type in TypeScript?

easy

A. A function type that takes or returns another function

B. A function type that only returns a number

C. A function type that cannot accept parameters

D. A function type that only works with strings

Solution

1. Step 1: Understand function types

   Function types describe the input and output of functions in TypeScript.

2. Step 2: Define higher-order function types

   Higher-order function types specifically involve functions that take other functions as parameters or return functions.

3. Final Answer:

   A function type that takes or returns another function -> Option A

4. Quick Check:

   Higher-order function = function takes/returns function [OK]

Hint: Higher-order means function uses another function [OK]

Common Mistakes:

• Thinking higher-order means only returning numbers
• Confusing higher-order with no parameters
• Assuming it only works with strings

2. Which of the following is the correct TypeScript syntax for a higher-order function type that takes a function returning number and returns void?

easy

A. (fn: number) => void

B. fn: () => number => void

C. () => number => void

D. (fn: () => number) => void

Solution

1. Step 1: Analyze the parameter type

   The parameter is a function with no arguments returning a number, written as () => number.

2. Step 2: Analyze the return type

   The higher-order function returns void, so the full type is (fn: () => number) => void.

3. Final Answer:

   (fn: () => number) => void -> Option D

4. Quick Check:

   Parameter is function, return is void [OK]

Hint: Use parentheses to wrap function parameter types [OK]

Common Mistakes:

• Missing parentheses around function parameter
• Writing arrow syntax incorrectly
• Using wrong parameter types

3. What is the output of this TypeScript code?

type Fn = (x: number) => number;
function applyTwice(f: Fn, value: number): number {
  return f(f(value));
}
const double: Fn = x => x * 2;
console.log(applyTwice(double, 3));

medium

A. 12

B. 6

C. 9

D. Error

Solution

1. Step 1: Understand applyTwice function

   It applies function f twice: f(f(value)).

2. Step 2: Calculate output with double function

   double(3) = 6, then double(6) = 12, so result is 12.

3. Final Answer:

   12 -> Option A

4. Quick Check:

   applyTwice(double, 3) = 12 [OK]

Hint: Apply function twice step-by-step [OK]

Common Mistakes:

• Calculating only one application of function
• Confusing multiplication with addition
• Expecting a syntax or runtime error

4. Identify the error in this TypeScript higher-order function type declaration:

type Mapper = (fn: (x: number) => number) => number[];
const mapToArray: Mapper = fn => {
  return fn.map(x => x * 2);
};

medium

A. No error, code is correct

B. fn is a function, but .map is called on it incorrectly

C. fn parameter should be a number, not a function

D. Mapper type should return a function, not an array

Solution

1. Step 1: Check type of fn parameter

   fn is a function (x: number) => number, not an array.

2. Step 2: Analyze usage of fn.map

   Calling .map on fn is invalid because fn is not an array but a function.

3. Final Answer:

   fn is a function, but .map is called on it incorrectly -> Option B

4. Quick Check:

   Function cannot use .map method [OK]

Hint: Functions don't have .map method [OK]

Common Mistakes:

• Assuming function can use array methods
• Misreading return type
• Ignoring parameter types

5. Given this TypeScript type for a higher-order function:

type Compose = <T, U, V>(f: (b: U) => V, g: (a: T) => U) => (a: T) => V;

Which implementation correctly matches this type?

hard

A. const compose: Compose = (f, g) => a => g(f(a));

B. const compose: Compose = (f, g) => (a, b) => f(a) + g(b);

C. const compose: Compose = (f, g) => a => f(g(a));

D. const compose: Compose = (f, g) => a => f(a) * g(a);

Solution

1. Step 1: Understand Compose type

   Compose takes two functions f and g, returns a function that applies g then f.

2. Step 2: Check each implementation

   const compose: Compose = (f, g) => a => f(g(a)); applies f(g(a)) which matches the type. Others do not follow the composition pattern.

3. Final Answer:

   const compose: Compose = (f, g) => a => f(g(a)); -> Option C

4. Quick Check:

   Compose = f(g(a)) [OK]

Hint: Compose means f(g(a)) order [OK]

Common Mistakes:

• Reversing function order
• Adding parameters incorrectly
• Using arithmetic instead of function calls