Higher-order function types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Typescript

type NumberFunc = (x: number) => [1];

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

Aboolean

Bnumber

Cvoid

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a return type different from the input type.

Confusing parameter type with return type.

The function takes a number and returns a number, so the return type is number.

2fill in blank

medium

Complete the code to declare a higher-order function type that takes a function (number to number) and returns a function (number to number).

Typescript

type HigherOrder = (fn: (x: number) => number) => [1];

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

Avoid

Bstring

Cnumber

D(x: number) => number

Attempts:

3 left

💡 Hint

Common Mistakes

Using void as return type instead of a function type.

Confusing return type with parameter type.

The higher-order function returns another function that takes a number and returns a number, so the return type is (x: number) => number.

3fill in blank

hard

Fix the error in the function type declaration to correctly type a function that takes a function and returns void.

Typescript

type Func = (callback: (msg: string) => void) => [1];

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

Avoid

Bstring

Cnumber

D(msg: string) => void

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function type as return type instead of void.

Confusing parameter and return types.

The function takes a callback and returns nothing, so the return type is void.

4fill in blank

hard

Fill both blanks to declare a function type that takes a function returning a boolean and returns a function returning a string.

Typescript

type ComplexFunc = (check: () => [1]) => () => [2];

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

Aboolean

Bstring

Cnumber

Dvoid

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the return types of the parameter and returned functions.

Using void instead of the correct types.

The parameter function returns a boolean, and the returned function returns a string.

5fill in blank

hard

Fill all three blanks to declare a higher-order function type that takes a function (string to number), returns a function taking a number and returning a boolean.

Typescript

type HOF = (fn: (input: [1]) => [2]) => (arg: [3]) => boolean;

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

Astring

Bnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping input and output types.

Using wrong types for the returned function's argument.

The input function takes a string and returns a number. The returned function takes a number and returns a boolean.

Practice

1. What is a higher-order function type in TypeScript?

easy

A. A function type that takes or returns another function

B. A function type that only returns a number

C. A function type that cannot accept parameters

D. A function type that only works with strings

Solution

1. Step 1: Understand function types

   Function types describe the input and output of functions in TypeScript.

2. Step 2: Define higher-order function types

   Higher-order function types specifically involve functions that take other functions as parameters or return functions.

3. Final Answer:

   A function type that takes or returns another function -> Option A

4. Quick Check:

   Higher-order function = function takes/returns function [OK]

Hint: Higher-order means function uses another function [OK]

Common Mistakes:

• Thinking higher-order means only returning numbers
• Confusing higher-order with no parameters
• Assuming it only works with strings

2. Which of the following is the correct TypeScript syntax for a higher-order function type that takes a function returning number and returns void?

easy

A. (fn: number) => void

B. fn: () => number => void

C. () => number => void

D. (fn: () => number) => void

Solution

1. Step 1: Analyze the parameter type

   The parameter is a function with no arguments returning a number, written as () => number.

2. Step 2: Analyze the return type

   The higher-order function returns void, so the full type is (fn: () => number) => void.

3. Final Answer:

   (fn: () => number) => void -> Option D

4. Quick Check:

   Parameter is function, return is void [OK]

Hint: Use parentheses to wrap function parameter types [OK]

Common Mistakes:

• Missing parentheses around function parameter
• Writing arrow syntax incorrectly
• Using wrong parameter types

3. What is the output of this TypeScript code?

type Fn = (x: number) => number;
function applyTwice(f: Fn, value: number): number {
  return f(f(value));
}
const double: Fn = x => x * 2;
console.log(applyTwice(double, 3));

medium

A. 12

B. 6

C. 9

D. Error

Solution

1. Step 1: Understand applyTwice function

   It applies function f twice: f(f(value)).

2. Step 2: Calculate output with double function

   double(3) = 6, then double(6) = 12, so result is 12.

3. Final Answer:

   12 -> Option A

4. Quick Check:

   applyTwice(double, 3) = 12 [OK]

Hint: Apply function twice step-by-step [OK]

Common Mistakes:

• Calculating only one application of function
• Confusing multiplication with addition
• Expecting a syntax or runtime error

4. Identify the error in this TypeScript higher-order function type declaration:

type Mapper = (fn: (x: number) => number) => number[];
const mapToArray: Mapper = fn => {
  return fn.map(x => x * 2);
};

medium

A. No error, code is correct

B. fn is a function, but .map is called on it incorrectly

C. fn parameter should be a number, not a function

D. Mapper type should return a function, not an array

Solution

1. Step 1: Check type of fn parameter

   fn is a function (x: number) => number, not an array.

2. Step 2: Analyze usage of fn.map

   Calling .map on fn is invalid because fn is not an array but a function.

3. Final Answer:

   fn is a function, but .map is called on it incorrectly -> Option B

4. Quick Check:

   Function cannot use .map method [OK]

Hint: Functions don't have .map method [OK]

Common Mistakes:

• Assuming function can use array methods
• Misreading return type
• Ignoring parameter types

5. Given this TypeScript type for a higher-order function:

type Compose = <T, U, V>(f: (b: U) => V, g: (a: T) => U) => (a: T) => V;

Which implementation correctly matches this type?

hard

A. const compose: Compose = (f, g) => a => g(f(a));

B. const compose: Compose = (f, g) => (a, b) => f(a) + g(b);

C. const compose: Compose = (f, g) => a => f(g(a));

D. const compose: Compose = (f, g) => a => f(a) * g(a);

Solution

1. Step 1: Understand Compose type

   Compose takes two functions f and g, returns a function that applies g then f.

2. Step 2: Check each implementation

   const compose: Compose = (f, g) => a => f(g(a)); applies f(g(a)) which matches the type. Others do not follow the composition pattern.

3. Final Answer:

   const compose: Compose = (f, g) => a => f(g(a)); -> Option C

4. Quick Check:

   Compose = f(g(a)) [OK]

Hint: Compose means f(g(a)) order [OK]

Common Mistakes:

• Reversing function order
• Adding parameters incorrectly
• Using arithmetic instead of function calls