Callback function types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a typed callback function

What is the output of this TypeScript code when the callback is called?

Typescript

function processNumber(num: number, callback: (n: number) => number): number {
  return callback(num * 2);
}

const result = processNumber(5, (x) => x + 3);
console.log(result);

A 13

B 16

C 10

D 8

💡 Hint

Remember the callback receives num * 2 and adds 3.

The function doubles 5 to 10, then the callback adds 3, resulting in 13.

❓ Predict Output

intermediate

Return type of a callback with void

What will be logged when this TypeScript code runs?

Typescript

function executeCallback(cb: (msg: string) => void) {
  cb('Hello');
  return 'Done';
}

const output = executeCallback((text) => console.log(text.length));
console.log(output);

A Hello\nDone

B 5\nDone

C undefined\nDone

D 5\nundefined

💡 Hint

The callback logs the length of the string, then the function returns 'Done'.

The callback logs 5 (length of 'Hello'), then 'Done' is logged after.

🔧 Debug

advanced

Identify the type error in callback usage

Which option shows the correct callback type to fix the TypeScript error in this code?

Typescript

function fetchData(callback: (data: string) => void) {
  callback('data loaded');
}

fetchData((info: number) => console.log(info));

A (info: string) => void

B () => void

C (info: any) => string

D (info: number) => void

💡 Hint

The callback expects a string parameter, not a number.

The callback must accept a string because fetchData calls it with a string.

📝 Syntax

advanced

Correct callback type syntax

Which option correctly types a callback that takes two numbers and returns a boolean?

A (a: number, b: number) => { return boolean; }

B function(a: number, b: number): boolean

C (a: number, b: number): boolean => {}

D (a: number, b: number) => boolean

💡 Hint

Arrow function type syntax uses '=>' without function body.

Option D correctly declares the callback type signature without implementation.

🚀 Application

expert

Using callback types with optional parameters

Given this function, which callback type allows the second parameter to be optional?

Typescript

function operate(x: number, y: number, cb: (a: number, b?: number) => number) {
  return cb(x, y);
}

const result = operate(4, 5, (m, n) => n ? m + n : m);
console.log(result);

A (a: number, b?: number | undefined) => void

B (a: number, b: number) => number

C (a: number, b?: number) => number

D (a: number) => number

💡 Hint

Optional parameters use '?' after the parameter name.

Option C correctly marks the second parameter as optional and returns a number.

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