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.