Multiple generic parameters in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a function with two generic parameters

What is the output of the following TypeScript code?

Typescript

function pairToString<T, U>(first: T, second: U): string {
  return `${typeof first}:${first},${typeof second}:${second}`;
}

console.log(pairToString<number, string>(42, "hello"));

A "number:42,string:hello"

B "number, string"

C "42,hello"

D "T:42,U:hello"

💡 Hint

Look at how the function uses typeof to get the type names as strings.

The function returns a string showing the type and value of each parameter. For 42 (number) and "hello" (string), it returns "number:42,string:hello".

❓ Predict Output

intermediate

Result of generic tuple type usage

What is the type of variable 'result' after this code runs?

Typescript

function makeTuple<A, B>(a: A, b: B): [A, B] {
  return [a, b];
}

const result = makeTuple<string, number>("age", 30);

A string[]

B [number, string]

C [string, number]

D any[]

💡 Hint

Check the return type annotation of the function.

The function returns a tuple with the first element of type A and the second of type B. Here, A is string and B is number, so the type is [string, number].

🔧 Debug

advanced

Identify the error in multiple generic parameters usage

What error does this TypeScript code produce?

Typescript

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

const result = combine<number, string>(5, "hello");

A TypeError: Cannot combine number and string

B SyntaxError: Unexpected token '&'

C No error, result is {5, "hello"}

D TypeError: Spread types may only be created from object types

💡 Hint

Consider what types can be spread into objects.

The spread operator ... works only on objects. Number and string are primitive types, so spreading them causes a TypeError.

📝 Syntax

advanced

Correct syntax for multiple generic parameters in interface

Which option correctly declares an interface with two generic parameters T and U?

A interface Pair<T, U> { first: T; second: U; }

B interface Pair<T> U { first: T; second: U; }

C interface Pair<T; U> { first: T; second: U; }

D interface Pair<T U> { first: T; second: U; }

💡 Hint

Generic parameters are separated by commas inside angle brackets.

Option A uses correct syntax: angle brackets with comma-separated generic parameters.

🚀 Application

expert

Determine output of complex generic function with constraints

What is the output of this TypeScript code?

Typescript

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

const a = { name: "Alice" };
const b = { age: 25 };
const merged = mergeObjects(a, b);
console.log(merged.name + " is " + merged.age + " years old.");

A "undefined is 25 years old."

B "Alice is 25 years old."

C TypeError: Cannot read property 'name' of undefined

D SyntaxError: Unexpected token '&'

💡 Hint

Check how the function merges two objects and the constraints on generic types.

The function merges two objects with generic constraints ensuring both are objects. The merged object has properties from both, so accessing merged.name and merged.age works.

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