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.