Function overloads in Typescript - Mini Project: Build & Apply

Function overloads

📖 Scenario: You are building a simple calculator that can add numbers or concatenate strings. Depending on the input types, the calculator should behave differently.

🎯 Goal: Create a TypeScript function called combine that works with both numbers and strings using function overloads. It should add numbers or join strings.

📋 What You'll Learn

Create two function overload signatures for combine: one for two numbers, one for two strings

Implement the combine function to handle both cases

Test the function by calling combine with numbers and strings

Print the results of the function calls

💡 Why This Matters

🌍 Real World

Function overloads help create flexible functions that work with different types of inputs, like calculators or formatters.

💼 Career

Many programming jobs require writing clean, reusable code that handles multiple data types safely, especially in TypeScript.

1

Create function overload signatures

Write two function overload signatures for a function called combine. The first signature takes two number parameters and returns a number. The second signature takes two string parameters and returns a string.

Typescript

// Write two function overload signatures for combine
// Your code here

Need a hint?

Function overloads are multiple function declarations with the same name but different parameter types.

2

Implement the combine function

Implement the combine function with parameters a and b of type any. Inside the function, check if both a and b are numbers and return their sum. Otherwise, return their concatenation as strings.

Typescript

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;

// Implement the combine function below
// Your code here

Need a hint?

Use typeof to check the types inside the function and return accordingly.

3

Call the combine function with numbers and strings

Call the combine function twice: once with numbers 5 and 10, and once with strings 'Hello' and 'World'. Store the results in variables called resultNumbers and resultStrings respectively.

Typescript

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else {
        return a.toString() + b.toString();
    }
}

// Call combine with numbers and strings and store results
// Your code here

Need a hint?

Call the function with exact values and store the results in variables.

4

Print the results

Print the values of resultNumbers and resultStrings using two separate console.log statements.

Typescript

function combine(a: number, b: number): number;
function combine(a: string, b: string): string;
function combine(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else {
        return a.toString() + b.toString();
    }
}

const resultNumbers = combine(5, 10);
const resultStrings = combine('Hello', 'World');

// Print the results below
// Your code here

Need a hint?

Use console.log to show the results on the screen.