Higher-order function types in Typescript - Mini Project: Build & Apply

Higher-order function types

📖 Scenario: You are building a simple calculator app that can apply different operations to numbers. To make your code flexible, you want to use higher-order functions that accept other functions as arguments.

🎯 Goal: Learn how to create and use higher-order function types in TypeScript by writing a function that takes another function as a parameter and applies it to numbers.

📋 What You'll Learn

Create a function type alias called Operation that represents a function taking two number arguments and returning a number.

Create a function called applyOperation that takes two number arguments and a third argument of type Operation.

Inside applyOperation, call the Operation function with the two numbers and return the result.

Create two functions add and multiply that match the Operation type.

Use applyOperation with add and multiply and print the results.

💡 Why This Matters

🌍 Real World

Higher-order functions are used in many real-world apps to customize behavior, like event handlers, array methods, and middleware.

💼 Career

Understanding higher-order function types is important for writing clean, reusable, and type-safe code in TypeScript, a skill valued in frontend and backend development jobs.

1

Create the Operation function type

Create a type alias called Operation that represents a function taking two number arguments named a and b, and returning a number.

Typescript

# Your code here

Hint

Use the type keyword to create a function type alias with two parameters and a number return type.

2

Create the applyOperation function

Create a function called applyOperation that takes three parameters: a and b of type number, and operation of type Operation. The function should return the result of calling operation(a, b).

Typescript

type Operation = (a: number, b: number) => number;
# Your code here

Hint

Define a function with three parameters and call the operation function with a and b.

3

Create add and multiply functions

Create two functions called add and multiply that each take two number parameters and return their sum and product respectively. Both functions should match the Operation type.

Typescript

type Operation = (a: number, b: number) => number;

function applyOperation(a: number, b: number, operation: Operation): number {
    return operation(a, b);
}

# Your code here

Hint

Write two simple functions that add and multiply two numbers, matching the Operation type.

4

Use applyOperation and print results

Use console.log to print the result of calling applyOperation(5, 3, add) and applyOperation(5, 3, multiply).

Typescript

type Operation = (a: number, b: number) => number;

function applyOperation(a: number, b: number, operation: Operation): number {
    return operation(a, b);
}

function add(a: number, b: number): number {
    return a + b;
}

function multiply(a: number, b: number): number {
    return a * b;
}

# Your code here

Hint

Call applyOperation with numbers 5 and 3, and the add and multiply functions. Print the results using console.log.

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