Conditional types for overload replacement in Typescript - Mini Project: Build & Apply

Using Conditional Types for Overload Replacement in TypeScript

📖 Scenario: Imagine you are building a simple calculator function that can add numbers or concatenate strings. Instead of writing multiple overloads, you want to use TypeScript's conditional types to decide the return type based on the input type.

🎯 Goal: Create a function called combine that takes either two numbers or two strings. Use conditional types to make the return type number when inputs are numbers, and string when inputs are strings. Then test the function with both types.

📋 What You'll Learn

Create a generic type CombineResult<T> that uses conditional types to return number if T is number, otherwise string.

Write a function combine with two parameters a and b of the same generic type T.

Use the CombineResult<T> type as the return type of combine.

Inside combine, add numbers or concatenate strings based on the type of a.

Test combine with two numbers and two strings and print the results.

💡 Why This Matters

🌍 Real World

Conditional types help create flexible functions that adapt their return types based on input types, reducing the need for multiple overloads and making code easier to maintain.

💼 Career

Understanding conditional types is important for TypeScript developers to write clean, type-safe code that works well in large projects and libraries.

1

Create the generic conditional type

Create a generic type called CombineResult<T> that returns number if T is number, otherwise returns string.

Typescript

# Your code here
// Create CombineResult conditional type

Need a hint?

Use T extends number ? number : string to create the conditional type.

2

Write the combine function signature

Write a generic function called combine with two parameters a and b of type T. Use CombineResult<T> as the return type.

Typescript

type CombineResult = T extends number ? number : string;

// Write function combine with parameters a and b of type T
// Return type should be CombineResult
function combine(a: T, b: T): CombineResult {
    // Your code here
}

Need a hint?

Use function combine<T>(a: T, b: T): CombineResult<T> for the signature.

3

Implement the combine function logic

Inside the combine function, check if a is a number using typeof a === 'number'. If yes, return the sum of a and b. Otherwise, return the concatenation of a and b as strings.

Typescript

type CombineResult = T extends number ? number : string;

function combine(a: T, b: T): CombineResult {
    // Check if a is number and return sum or concatenation
    // Your code here
}

Need a hint?

Use typeof to check the type and cast the return value to CombineResult<T>.

4

Test the combine function and print results

Call combine with numbers 5 and 10 and store in resultNumber. Call combine with strings 'Hello' and 'World' and store in resultString. Print both results using console.log.

Typescript

type CombineResult = T extends number ? number : string;

function combine(a: T, b: T): CombineResult {
    if (typeof a === 'number' && typeof b === 'number') {
        return (a + b) as CombineResult;
    } else {
        return (String(a) + String(b)) as CombineResult;
    }
}

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

Need a hint?

Use console.log(resultNumber) and console.log(resultString) to print the results.