Callback function types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a callback type that takes a number and returns void.

Typescript

type Callback = (num: number) => [1];

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cvoid

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using a return type other than void when the function returns nothing.

The callback function returns void because it does not return any value.

2fill in blank

medium

Complete the code to define a function that accepts a callback with a string parameter.

Typescript

function greet(callback: (message: [1]) => void) {
  callback('Hello!');
}

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a type that does not match the argument passed to the callback.

The callback expects a string parameter because it receives a greeting message.

3fill in blank

hard

Fix the error in the callback type to accept two parameters: a number and a string.

Typescript

type MyCallback = ([1]) => void;

Drag options to blanks, or click blank then click option'

Anum: number, text: string

Bnum: string

Cnum: number

Dtext: string

Attempts:

3 left

💡 Hint

Common Mistakes

Providing only one parameter or wrong parameter types.

The callback must accept two parameters: a number and a string, separated by a comma.

4fill in blank

hard

Fill both blanks to declare a callback type that takes a boolean and returns a number.

Typescript

type BoolToNum = (flag: [1]) => [2];

Drag options to blanks, or click blank then click option'

Aboolean

Bstring

Cnumber

Dvoid

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up parameter and return types.

The callback takes a boolean and returns a number.

5fill in blank

hard

Fill all three blanks to define a function that accepts a callback with two parameters and returns void.

Typescript

function processData(callback: ([1]: number, [2]: string) => [3]) {
  callback(42, 'data');
}

Drag options to blanks, or click blank then click option'

Aid

Bname

Cvoid

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter names or return type.

The callback parameters are named id and name, and the return type is void.