Multiple generic parameters in Typescript - Mini Project: Build & Apply

Using Multiple Generic Parameters in TypeScript

📖 Scenario: Imagine you are building a simple system to pair two related pieces of information, like a person's name and their age, or a product and its price.

🎯 Goal: You will create a generic function that can take two different types and return them as a pair. This will help you understand how to use multiple generic parameters in TypeScript.

📋 What You'll Learn

Create a generic function with two type parameters

Use the generic parameters to type the function's inputs and output

Call the function with different types

Print the results to the console

💡 Why This Matters

🌍 Real World

Generic functions with multiple parameters are useful when you want to work with pairs or groups of related data without fixing their types in advance.

💼 Career

Understanding multiple generic parameters is important for writing reusable and type-safe code in TypeScript, which is widely used in web development and software engineering.

1

Create a generic function with two type parameters

Write a generic function called makePair with two generic parameters T and U. The function should take two arguments: first of type T and second of type U. It should return an object with properties first and second holding these values.

Typescript

// Your code here

Need a hint?

Use after the function name to declare two generic types.

2

Call makePair with string and number types

Call the makePair function with "Alice" as the first argument and 30 as the second argument. Store the result in a variable called person.

Typescript

function makePair(first: T, second: U): { first: T; second: U } {
    return { first, second };
}

// Your code here

Need a hint?

Specify the types string and number when calling makePair.

3

Call makePair with boolean and string types

Call the makePair function with true as the first argument and "active" as the second argument. Store the result in a variable called status.

Typescript

function makePair(first: T, second: U): { first: T; second: U } {
    return { first, second };
}

const person = makePair("Alice", 30);

// Your code here

Need a hint?

Use boolean and string as the generic types for this call.

4

Print the results to the console

Print the variables person and status to the console using two separate console.log statements.

Typescript

function makePair(first: T, second: U): { first: T; second: U } {
    return { first, second };
}

const person = makePair("Alice", 30);
const status = makePair(true, "active");

// Your code here

Need a hint?

Use console.log(person) and console.log(status) to show the results.