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.