Higher-order function types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a higher-order function returning a function

What is the output of the following TypeScript code?

Typescript

function multiplier(factor: number): (input: number) => number {
  return (input: number) => input * factor;
}
const double = multiplier(2);
console.log(double(5));

A undefined

B 10

C TypeError

D 25

💡 Hint

Think about what the returned function does with the input.

The function multiplier returns a new function that multiplies its input by the factor. Calling double(5) multiplies 5 by 2, resulting in 10.

🧠 Conceptual

intermediate

Type of a function that takes a function and returns a function

Which TypeScript type correctly describes a function that takes a function (number => string) and returns a function (string => number)?

A (fn: (x: number) => string) => (y: string) => number

B (fn: (x: string) => string) => (y: number) => number

C (fn: (x: number) => number) => (y: string) => string

D (fn: (x: string) => number) => (y: number) => string

💡 Hint

Look carefully at the input and output types of the inner functions.

The function takes a function from number to string and returns a function from string to number, matching option A.

🔧 Debug

advanced

Identify the error in higher-order function type usage

What error does this TypeScript code produce?

Typescript

function compose(f: (a: number) => string, g: (b: string) => boolean): (x: number) => boolean {
  return (x: number) => g(f(x));
}
const result = compose((n) => n.toString(), (s) => s.length > 2)(10);
console.log(result);

A No error, outputs true

B TypeError at runtime

C TypeScript compile error: Argument of type '(n: number) => string' is not assignable to parameter of type '(a: number) => string'

D TypeScript compile error: Type 'boolean' is not assignable to type 'string'

💡 Hint

Check if the function types match and the composition is valid.

The compose function correctly composes f and g. f converts number to string, g converts string to boolean. The final function returns boolean. The call outputs false because '10' length is 2, so s.length > 2 is false.

📝 Syntax

advanced

Which option causes a syntax error in higher-order function type declaration?

Which of the following TypeScript function type declarations is syntactically invalid?

A rebmun >= )gnirts :y( >= )gnirts >= )rebmun :x( :nf(

B (fn: (x: number) => string) => (y: string) => number

C (fn: (x: number) => string) => (y string) => number

D fn: (x: number) => string) => (y: string) => number

💡 Hint

Look for missing punctuation or keywords in the function parameter list.

Option C is missing a colon between parameter name and type in '(y string)', causing a syntax error.

🚀 Application

expert

Determine the output count of a higher-order function returning multiple functions

Consider this TypeScript code. How many functions are returned and stored in the array 'funcs'?

Typescript

function createFuncs(): Array<() => number> {
  const funcs = [];
  for (let i = 0; i < 3; i++) {
    funcs.push(() => i);
  }
  return funcs;
}
const funcs = createFuncs();
console.log(funcs.length);

A TypeError

B 0

C 1

D 3

💡 Hint

Count how many times the loop runs and how many functions are pushed.

The loop runs 3 times, pushing a function each time, so the array has length 3.

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