Why advanced generics matter in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a generic function with constraints

What is the output of this TypeScript code using generics with constraints?

Typescript

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

const result = merge({name: "Alice"}, {age: 30});
console.log(result);

A {"name": "Alice", "age": 30}

B {"name": "Alice"}

C TypeError at runtime

D SyntaxError during compilation

💡 Hint

Think about how the spread operator combines objects and how generics with constraints work.

The function merges two objects using spread syntax. The generic constraints ensure both inputs are objects. The result combines properties from both inputs.

🧠 Conceptual

intermediate

Why use advanced generics in TypeScript?

Which of the following best explains why advanced generics matter in TypeScript?

A They automatically fix runtime errors without extra code.

B They make the code run faster by optimizing JavaScript output.

C They allow writing flexible and reusable code that works with many types while preserving type safety.

D They replace the need for interfaces and classes entirely.

💡 Hint

Think about how generics help with type safety and code reuse.

Advanced generics let you write code that adapts to different types while keeping type checks, making code reusable and safe.

🔧 Debug

advanced

Identify the error in this generic function

What error does this TypeScript code produce?

Typescript

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person = {name: "Bob", age: 25};
const value = getProperty(person, "height");

A Compilation error: Argument of type '"height"' is not assignable to parameter of type '"name" | "age"'

B TypeError at runtime because 'height' does not exist

C No error, outputs undefined

D SyntaxError due to missing return type

💡 Hint

Check the constraint on the key parameter and the keys of the object.

The generic constraint K extends keyof T means the key must be a valid property name of T. 'height' is not a key of person, so TypeScript raises a compile error.

📝 Syntax

advanced

Which option correctly defines a generic type with default?

Which TypeScript code correctly defines a generic interface with a default type parameter?

A interface Box<T> = string { value: T; }

B interface Box<T: string> { value: T; }

C interface Box<T default string> { value: T; }

D interface Box<T = string> { value: T; }

💡 Hint

Look for the correct syntax for default generic parameters in TypeScript.

Option D uses the correct syntax to set a default type parameter for a generic interface.

🚀 Application

expert

Determine the output of a complex generic mapped type

What is the type of 'Result' after this code runs?

Typescript

type Options = { a: number; b: string; c: boolean };
type Nullable<T> = { [P in keyof T]: T[P] | null };
type Result = Nullable<Pick<Options, 'a' | 'c'>>;

A {"a": number, "c": boolean}

B {"a": number | null, "c": boolean | null}

C {"a": number | null, "b": string | null, "c": boolean | null}

D {"a": number, "b": string, "c": boolean | null}

💡 Hint

Understand how Pick and mapped types work together with generics.

Pick selects only 'a' and 'c' properties. Nullable makes each property nullable. So Result has 'a' and 'c' keys with their types or null.