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.

Practice

1. What does a callback function type in TypeScript specify?

easy

A. The input parameters and return type of the callback function

B. The variable names used inside the callback function

C. The order in which functions are called

D. The number of times a function is called

Solution

1. Step 1: Understand callback function types

   A callback function type defines what inputs (parameters) the callback expects and what it returns.

2. Step 2: Identify what is specified

   It does not specify variable names, call order, or call count, only input and output types.

3. Final Answer:

   The input parameters and return type of the callback function -> Option A

4. Quick Check:

   Callback type = inputs and output [OK]

Hint: Callback types describe inputs and outputs only [OK]

Common Mistakes:

• Confusing callback type with variable names
• Thinking callback type controls call order
• Assuming callback type limits call count

2. Which of the following is the correct TypeScript syntax to declare a callback type that takes a number and returns void?

easy

A. type Callback = (input: number) => void;

B. type Callback = (number) => void;

C. type Callback = (input: number) => number;

D. type Callback = void (input: number);

Solution

1. Step 1: Check correct syntax for callback type

   In TypeScript, a function type is declared as (parameters) => returnType. Parameters must have names and types.

2. Step 2: Match the correct option

   type Callback = (input: number) => void; correctly declares a function taking a number named 'input' and returning void.

3. Final Answer:

   type Callback = (input: number) => void; -> Option A

4. Quick Check:

   Correct syntax = type Callback = (input: number) => void; [OK]

Hint: Use (param: type) => returnType syntax [OK]

Common Mistakes:

• Omitting parameter name
• Wrong return type
• Incorrect arrow function syntax

3. What will be the output of this TypeScript code?

type Callback = (x: number) => number;
function applyCallback(n: number, cb: Callback) {
  return cb(n) + 1;
}
const result = applyCallback(5, x => x * 2);
console.log(result);

medium

A. 10

B. 11

C. 6

D. Error

Solution

1. Step 1: Understand the callback and function call

   The callback multiplies input by 2. applyCallback calls cb(5), which is 5*2=10, then adds 1.

2. Step 2: Calculate the final result

   10 + 1 = 11, so console.log prints 11.

3. Final Answer:

   11 -> Option B

4. Quick Check:

   5*2+1 = 11 [OK]

Hint: Calculate callback result then add 1 [OK]

Common Mistakes:

• Forgetting to add 1 after callback
• Confusing callback return with input
• Assuming callback returns void

4. Identify the error in this TypeScript code snippet:

type Callback = (msg: string) => void;
function greet(cb: Callback) {
  cb(123);
}

medium

A. Function greet should not accept a callback

B. Callback should return a number, not void

C. Callback expects a string, but a number is passed

D. No error, code is correct

Solution

1. Step 1: Check callback type and usage

   Callback expects a string parameter, but greet calls cb with 123 (a number).

2. Step 2: Identify type mismatch error

   Passing a number where a string is expected causes a type error.

3. Final Answer:

   Callback expects a string, but a number is passed -> Option C

4. Quick Check:

   Type mismatch in callback argument [OK]

Hint: Match callback parameter types exactly [OK]

Common Mistakes:

• Passing wrong argument type to callback
• Ignoring callback return type
• Assuming no error on type mismatch

5. You want to create a function processItems that takes an array of numbers and a callback. The callback should receive each number and return a string.
Which is the correct callback type and function signature to ensure type safety?

hard

A. type Callback = (item: string) => number;
function processItems(items: string[], cb: Callback): number[];

B. type Callback = () => string;
function processItems(items: number[], cb: Callback): string[];

C. type Callback = (item: number) => void;
function processItems(items: number[], cb: Callback): void;

D. type Callback = (item: number) => string;
function processItems(items: number[], cb: Callback): string[];

Solution

1. Step 1: Define callback input and output types

   The callback should take a number and return a string, so type Callback = (item: number) => string.

2. Step 2: Define function signature matching callback and array

   processItems takes number[] and callback, returns string[] because it maps numbers to strings.

3. Final Answer:

   type Callback = (item: number) => string; function processItems(items: number[], cb: Callback): string[]; -> Option D

4. Quick Check:

   Callback input number, output string [OK]

Hint: Match callback input/output with function parameters/return [OK]

Common Mistakes:

• Mismatching callback parameter types
• Wrong return type in callback or function
• Ignoring array element types