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.

Practice

1. What is the main benefit of using advanced generics in TypeScript?

easy

A. They automatically fix bugs in your code.

B. They make the code run faster at runtime.

C. They allow writing flexible and reusable code with type safety.

D. They replace the need for functions.

Solution

1. Step 1: Understand what generics do

   Generics let you write code that works with many types without losing type safety.

2. Step 2: Identify the main benefit

   Advanced generics improve flexibility and reusability while preventing type errors.

3. Final Answer:

   They allow writing flexible and reusable code with type safety. -> Option C

4. Quick Check:

   Advanced generics = flexible reusable type-safe code [OK]

Hint: Think: generics = flexible + safe code [OK]

Common Mistakes:

• Confusing generics with runtime performance improvements
• Believing generics fix bugs automatically
• Thinking generics replace functions

2. Which of the following is the correct syntax to declare a generic function in TypeScript?

easy

A. function example(arg: T): T { return arg; }

B. function example<T>(arg: T): void { return arg; }

C. function example<T>(arg): T { return arg; }

D. function example<T>(arg: T): T { return arg; }

Solution

1. Step 1: Check generic syntax

   Generic functions declare a type parameter inside angle brackets after the function name.

2. Step 2: Verify parameter and return types

   The argument and return type should use the generic type parameter T.

3. Final Answer:

   function example<T>(arg: T): T { return arg; } -> Option D

4. Quick Check:

   Generic function syntax = function name<T>(arg: T): T [OK]

Hint: Generic syntax: function name<T>(arg: T): T [OK]

Common Mistakes:

• Omitting the generic parameter declaration <T>
• Not typing the argument with T
• Returning a value in a void function

3. What will be the output of this TypeScript code?

function wrapInArray<T>(value: T): T[] {
  return [value];
}

const result = wrapInArray(42);
console.log(result);

medium

A. [42]

B. 42

C. undefined

D. Error: Type mismatch

Solution

1. Step 1: Understand the function behavior

   The function takes a value of any type T and returns an array containing that value.

2. Step 2: Apply the function to the input

   Calling wrapInArray(42) returns [42], an array with the number 42 inside.

3. Final Answer:

   [42] -> Option A

4. Quick Check:

   wrapInArray(42) = [42] [OK]

Hint: Generic function returns array with input inside [OK]

Common Mistakes:

• Expecting just the value instead of an array
• Thinking it returns undefined
• Confusing type errors with runtime output

4. Identify the error in this TypeScript generic function:

function identity<T>(arg: T): T {
  return arg.length;
}

medium

A. The function returns a number but declares return type T.

B. The generic type T is not declared correctly.

C. The argument arg should not be generic.

D. There is no error in this function.

Solution

1. Step 1: Analyze the return statement

   The function returns arg.length, which is a number.

2. Step 2: Check return type consistency

   The function declares it returns type T, but number may not be T, causing a type mismatch.

3. Final Answer:

   The function returns a number but declares return type T. -> Option A

4. Quick Check:

   Return type mismatch = error [OK]

Hint: Return type must match declared generic type [OK]

Common Mistakes:

• Assuming arg always has length property
• Ignoring return type mismatch
• Thinking generic declaration is wrong

5. Given this generic interface and function, what is the correct way to use advanced generics to ensure type safety?

interface Container<T> {
  value: T;
}

function getValue<T>(container: Container<T>): T {
  return container.value;
}

const numberContainer = { value: 123 };
const stringContainer = { value: "hello" };

// Which call is correct?

hard

A. getValue(stringContainer);

B. getValue<number>(numberContainer);

C. getValue<number>(stringContainer);

D. getValue<string>(numberContainer);

Solution

1. Step 1: Match generic type with container value

   numberContainer has value of type number, so T should be number.

2. Step 2: Check each option for type safety

   getValue<number>(numberContainer); uses getValue<number>(numberContainer), which matches types correctly.

3. Final Answer:

   getValue<number>(numberContainer); -> Option B

4. Quick Check:

   Generic type matches container value type [OK]

Hint: Generic type must match container's value type [OK]

Common Mistakes:

• Passing wrong generic type for container value
• Omitting generic type when explicit needed
• Mixing container types incorrectly