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

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

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

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

Hint

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

Practice

1.

What does using multiple generic parameters in TypeScript allow you to do?

Example: function example<T, U>(arg1: T, arg2: U): void {}

easy

A. Only use one type at a time

B. Work with different types together in a single function or class

C. Automatically convert types to strings

D. Disable type checking for function arguments

Solution

1. Step 1: Understand generic parameters

   Generic parameters like T and U let you define placeholders for types.

2. Step 2: Analyze multiple generics usage

   Using multiple generics allows a function or class to accept different types for different parameters, making it flexible and type-safe.

3. Final Answer:

   Work with different types together in a single function or class -> Option B

4. Quick Check:

   Multiple generics = different types together [OK]

Hint: Multiple generics mean multiple type placeholders [OK]

Common Mistakes:

• Thinking generics convert types automatically
• Assuming only one generic can be used
• Believing generics disable type checking

2.

Which of the following is the correct syntax to declare a function with two generic parameters T and U in TypeScript?

easy

A. function example<T & U>(arg1: T, arg2: U): void {}

B. function example<T U>(arg1: T, arg2: U): void {}

C. function example<T; U>(arg1: T, arg2: U): void {}

D. function example<T, U>(arg1: T, arg2: U): void {}

Solution

1. Step 1: Recall generic syntax

   Generic parameters are listed inside angle brackets separated by commas, like <T, U>.

2. Step 2: Check each option

   The correct syntax uses function example<T, U>(arg1: T, arg2: U): void {} with generic parameters separated by commas inside angle brackets. The distractors use invalid delimiters: <T & U>, <T U> (no comma), and <T; U> (semicolon).

3. Final Answer:

   function example<T, U>(arg1: T, arg2: U): void {} -> Option D

4. Quick Check:

   Generics separated by commas inside <> [OK]

Hint: Separate generics with commas inside angle brackets [OK]

Common Mistakes:

• Omitting commas between generic parameters
• Using semicolons instead of commas
• Using & instead of commas

3.

What is the output of the following TypeScript code?

function pairToString<T, U>(pair: [T, U]): string {
  return `${pair[0]} and ${pair[1]}`;
}

const result = pairToString<number, string>([5, 'apples']);
console.log(result);

medium

A. "[5, apples]"

B. Type error because types differ

C. "5 and apples"

D. "number and string"

Solution

1. Step 1: Understand the function behavior

   The function takes a tuple with two generic types and returns a string combining both elements.

2. Step 2: Analyze the call with types and values

   Calling with <number, string> and tuple [5, 'apples'] returns the string "5 and apples".

3. Final Answer:

   "5 and apples" -> Option C

4. Quick Check:

   Tuple values combined as string = "5 and apples" [OK]

Hint: Generics keep types but output string combines values [OK]

Common Mistakes:

• Expecting a type error due to different types
• Thinking output is the tuple stringified
• Confusing generic types with runtime values

4.

Identify the error in this TypeScript function using multiple generic parameters:

function combine<T, U>(a: T, b: U): T {
  return b;
}

medium

A. Return type is T but function returns b of type U

B. Missing comma between generic parameters

C. Function should not use generics

D. Parameters a and b must be the same type

Solution

1. Step 1: Check function signature

   The function declares it returns type T but returns b which is type U.

2. Step 2: Identify type mismatch

   Returning b violates the declared return type T, causing a type error.

3. Final Answer:

   Return type is T but function returns b of type U -> Option A

4. Quick Check:

   Return type mismatch = error [OK]

Hint: Return type must match returned value type [OK]

Common Mistakes:

• Ignoring return type mismatch
• Thinking generics auto-convert types
• Assuming parameters must share the same type

5.

You want to create a generic function mergeObjects that takes two objects of different types and returns a new object combining both. Which is the correct way to declare this function with multiple generic parameters?

hard

A. function mergeObjects<T, U>(obj1: T, obj2: U): T & U { return {...obj1, ...obj2}; }

B. function mergeObjects<T>(obj1: T, obj2: T): T { return {...obj1, ...obj2}; }

C. function mergeObjects(obj1: object, obj2: object): object { return {...obj1, ...obj2}; }

D. function mergeObjects<T, U>(obj1: T, obj2: U): object { return {...obj1, ...obj2}; }

Solution

1. Step 1: Understand the goal

   The function should accept two objects of different types and return their combined type.

2. Step 2: Analyze return type

   Using T & U as return type means the result has properties from both types, which is correct.

3. Step 3: Check options

   function mergeObjects<T, U>(obj1: T, obj2: U): T & U { return {...obj1, ...obj2}; } correctly uses two generics and returns T & U. function mergeObjects<T>(obj1: T, obj2: T): T { return {...obj1, ...obj2}; } uses one generic and same type for both, which is less flexible. function mergeObjects(obj1: object, obj2: object): object { return {...obj1, ...obj2}; } uses plain objects without generics, losing type safety. function mergeObjects<T, U>(obj1: T, obj2: U): object { return {...obj1, ...obj2}; } returns just object, losing specific type info.

4. Final Answer:

   function mergeObjects<T, U>(obj1: T, obj2: U): T & U { return {...obj1, ...obj2}; } -> Option A

5. Quick Check:

   Multiple generics + intersection return type = correct [OK]

Hint: Use intersection type T & U for combined object return [OK]

Common Mistakes:

• Using one generic for both objects
• Returning just object losing type info
• Not using intersection type for return