Higher-order function types in Typescript - Step-by-Step Execution

Concept Flow - Higher-order function types

Define function type

↓

Create higher-order function

↓

Pass function as argument or return function

↓

Call higher-order function

↓

Execute inner function

↓

Get result or function

This flow shows how a function type is defined, then used in a higher-order function that takes or returns functions, and finally how calling it executes the inner function.

Execution Sample

Typescript

type Fn = (x: number) => number;

function applyTwice(f: Fn, x: number): number {
  return f(f(x));
}

const double: Fn = x => x * 2;

const result = applyTwice(double, 5);

This code defines a function type, a higher-order function that applies a function twice, and calls it with a doubling function and a number.

Execution Table

Step	Action	Evaluation	Result
1	Define type Fn	Fn = (x: number) => number	Type created
2	Define function applyTwice	applyTwice(f, x) returns f(f(x))	Function created
3	Define double function	double(x) = x * 2	Function created
4	Call applyTwice(double, 5)	Evaluate f(f(5)) with f=double	Evaluate double(double(5))
5	Evaluate inner double(5)	double(5) = 5 * 2	10
6	Evaluate outer double(10)	double(10) = 10 * 2	20
7	Return result	applyTwice returns 20	20

💡 applyTwice completes after applying double twice, returning 20

Variable Tracker

Variable	Start	After Step 5	After Step 6	Final
f	undefined	double function	double function	double function
x	undefined	5	10	10
result	undefined	undefined	undefined	20

Key Moments - 3 Insights

Why does applyTwice call f twice with nested calls?

Because applyTwice returns f(f(x)), it first calls f(x) then calls f again on that result, as shown in execution_table steps 4 to 6.

What type must the function passed to applyTwice have?

It must match the Fn type: a function taking a number and returning a number, so it can be called twice safely, as defined in step 1.

Why is the variable x updated from 5 to 10 during execution?

Inside applyTwice, the inner call f(x) evaluates to 10 (double(5)), then x is reused as 10 for the outer call f(10), shown in variable_tracker and steps 5-6.

Visual Quiz - 3 Questions

Look at the execution_table at step 5, what is the value of double(5)?

A 5

B 10

C 20

D Undefined

💡 Hint

Check execution_table row with Step 5, 'Evaluate inner double(5)' shows result 10.

At which step does applyTwice return the final result?

A Step 4

B Step 6

C Step 7

D Step 3

💡 Hint

Look at execution_table row Step 7, it shows 'Return result' with value 20.

If the function passed to applyTwice returned a string instead of number, what would happen?

A TypeScript would show a type error

B The code runs fine and returns a string

C applyTwice would return undefined

D The function would be called only once

💡 Hint

Refer to key_moments about function type requirements and TypeScript static checks.

Concept Snapshot

Higher-order function types in TypeScript:
- Define function types with type aliases, e.g. type Fn = (x: number) => number;
- Higher-order functions take or return functions matching these types.
- Call inner functions inside higher-order functions.
- TypeScript checks function signatures for safety.
- Example: applyTwice applies a function twice to a value.

Full Transcript

This example shows how to define a function type in TypeScript and use it in a higher-order function. The type Fn represents a function taking a number and returning a number. The function applyTwice takes a function f of type Fn and a number x, then returns f(f(x)). We define double as a function that doubles its input. Calling applyTwice(double, 5) first calls double(5) which is 10, then calls double(10) which is 20, and returns 20. Variables f and x change during execution as shown. Key points include understanding nested function calls and type safety. The quizzes test understanding of values at each step and type requirements.

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