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

Need a 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

Need a 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

Need a 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

Need a hint?

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