Callback function types in Typescript - Step-by-Step Execution

Concept Flow - Callback function types

Define callback type

↓

Write function with callback param

↓

Call function, pass callback

↓

Inside function: execute callback

↓

Callback runs with data

↓

Process result or output

This flow shows how a callback function type is defined, passed to another function, and then executed inside it.

Execution Sample

Typescript

type Callback = (msg: string) => void;

function greet(cb: Callback) {
  cb("Hello!");
}

greet(message => console.log(message));

This code defines a callback type, uses it in a function, and calls the function with a callback that logs a message.

Execution Table

Step	Action	Evaluation	Result
1	Define type Callback	Callback is a function taking string, returning void	Callback type ready
2	Define function greet with cb param of type Callback	greet expects a function matching Callback	greet function ready
3	Call greet with callback: message => console.log(message)	Pass callback function	greet called
4	Inside greet, execute cb("Hello!")	Call callback with "Hello!"	Callback runs
5	Callback logs message	console.log("Hello!")	Output: Hello!

💡 Callback executed and message logged, function greet ends

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
cb	undefined	message => console.log(message)	callback function executed	undefined after greet ends
message	undefined	undefined	"Hello!" passed to callback	undefined after callback ends

Key Moments - 3 Insights

Why do we define a type for the callback function?

Defining a type ensures the callback has the correct input and output, preventing errors. See Step 1 and Step 2 in the execution_table.

What happens when we call cb("Hello!") inside greet?

The callback function runs with "Hello!" as argument, triggering the console.log. See Step 4 and Step 5 in the execution_table.

Why does the callback parameter disappear after greet ends?

The callback is a local parameter to greet and only exists during its execution. After greet finishes, cb is no longer accessible. See variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, what is the type of cb at Step 2?

A A function taking a string and returning void

B A string

C A number

D Undefined

💡 Hint

Check Step 1 and Step 2 where Callback type is defined and used

At which step does the callback function actually run?

A Step 1

B Step 3

C Step 4

D Step 2

💡 Hint

Look at Step 4 where cb("Hello!") is called inside greet

If we change the callback to accept a number instead of a string, what happens?

A The callback will receive a string anyway

B TypeScript will show an error at the call site

C The code runs fine without errors

D The greet function will not call the callback

💡 Hint

Callback type enforces parameter types, see Step 1 and Step 2

Concept Snapshot

Callback function types in TypeScript:
- Define a type for the callback signature
- Use it as a parameter type in functions
- Pass a matching function when calling
- The callback runs inside the function
- Helps catch errors and clarify code

Full Transcript

This visual trace shows how callback function types work in TypeScript. First, we define a type named Callback that expects a function taking a string and returning nothing (void). Then, we write a function greet that takes a parameter cb of type Callback. When we call greet, we pass a function that logs the message it receives. Inside greet, we call cb with the string "Hello!". This runs the callback, which logs "Hello!" to the console. Variables cb and message change during execution but disappear after greet finishes. Defining callback types helps ensure the passed function matches expected inputs and outputs, preventing errors.