Generic constraints with extends in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic function with a constraint that the type must extend an object.

Typescript

function identity<T [1] object>(arg: T): T {
  return arg;
}

Drag options to blanks, or click blank then click option'

Aconforms

Bimplements

Cinherits

Dextends

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends' for generic constraints.

Using 'inherits' or 'conforms' which are not valid TypeScript keywords.

The keyword extends is used in TypeScript to constrain a generic type parameter to types that satisfy the given constraint, such as object.

2fill in blank

medium

Complete the code to constrain the generic type to have a 'length' property.

Typescript

function logLength<T [1] { length: number }>(arg: T): T {
  console.log(arg.length);
  return arg;
}

Drag options to blanks, or click blank then click option'

Aextends

Bimplements

Cinherits

Dconforms

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends' for generic constraints.

Trying to use 'interface' keyword here.

The extends keyword is used to constrain the generic type T to types that have a length property of type number.

3fill in blank

hard

Fix the error in the generic function declaration by completing the constraint.

Typescript

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

Drag options to blanks, or click blank then click option'

Ainherits

Bimplements

Cextends

Dconforms

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Omitting the constraint entirely.

The generic type K must be constrained to keys of T using extends keyof T.

4fill in blank

hard

Fill both blanks to create a generic function that accepts an array of items extending a base interface.

Typescript

interface Base {
  id: number;
}

function processItems<T [1] Base>(items: T[2]) {
  items.forEach(item => console.log(item.id));
}

Drag options to blanks, or click blank then click option'

Aextends

Bimplements

C[]

DArray<T>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Using 'Array' in the wrong blank.

The generic type T extends Base, and the parameter items is an array of T using [] syntax.

5fill in blank

hard

Fill all three blanks to define a generic class with a constraint and a method using the generic type.

Typescript

class Container<T [1] { name: string }> {
  private value: T;
  constructor(value: T) {
    this.value = value;
  }
  getName(): [2] {
    return this.value[3];
  }
}

Drag options to blanks, or click blank then click option'

Aextends

BT

C.name

Dimplements

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'implements' instead of 'extends'.

Returning the whole value instead of value.name.

Incorrect return type.

The generic type T extends an object with a name property. The method getName returns the name property of value.

Practice

1.

What does the extends keyword do in a TypeScript generic constraint?

easy

A. It limits the generic type to types that match a specific shape or interface.

B. It makes the generic type optional.

C. It allows the generic type to be any type without restriction.

D. It converts the generic type to a string.

Solution

1. Step 1: Understand the role of extends in generics

   The extends keyword in generics restricts the generic type to only those types that satisfy a certain condition, usually matching an interface or type shape.

2. Step 2: Compare with other options

   Options B, C, and D describe behaviors unrelated to extends in generics. It does not make types optional, allow any type, or convert types to strings.

3. Final Answer:

   It limits the generic type to types that match a specific shape or interface. -> Option A

4. Quick Check:

   Generic constraints = limit type shape [OK]

Hint: Remember: extends restricts generic types to certain shapes [OK]

Common Mistakes:

• Thinking extends makes a type optional
• Confusing extends with type conversion
• Assuming extends removes restrictions

2.

Which of the following is the correct syntax to constrain a generic type T to an object with a name property of type string?

function greet<T>(obj: T): string {
  return `Hello, ${obj.name}`;
}

easy

A. function greet<T>(obj: T extends { name: string }): string

B. function greet<T extends { name: string }>(obj: T): string

C. function greet<T = { name: string }>(obj: T): string

D. function greet<T>(obj: T & { name: string }): string

Solution

1. Step 1: Identify correct generic constraint syntax

   The correct way to constrain a generic type is using T extends { name: string } inside the angle brackets.

2. Step 2: Check other options for syntax errors

   function greet<T = { name: string }>(obj: T): string uses assignment (=) which is for default types, not constraints. function greet<T>(obj: T extends { name: string }): string misplaces extends outside the angle brackets. function greet<T>(obj: T & { name: string }): string uses intersection (&) in parameter type, which is valid but not a generic constraint.

3. Final Answer:

   function greet<T extends { name: string }>(obj: T): string -> Option B

4. Quick Check:

   Use extends inside <> for constraints [OK]

Hint: Use extends inside <> for constraints [OK]

Common Mistakes:

• Using = instead of extends for constraints
• Placing extends outside generic brackets
• Confusing intersection types with constraints

3.

What will be the output of this TypeScript code?

interface HasId { id: number; }
function getId<T extends HasId>(obj: T): number {
  return obj.id;
}
const item = { id: 42, name: 'Book' };
console.log(getId(item));

medium

A. Error: Type argument does not satisfy constraint

B. undefined

C. Error: Property 'id' does not exist

D. 42

Solution

1. Step 1: Check if item satisfies the constraint

   The interface HasId requires an id property of type number. The object item has id: 42, so it satisfies T extends HasId.

2. Step 2: Understand function behavior

   The function returns obj.id, so calling getId(item) returns 42.

3. Final Answer:

   42 -> Option D

4. Quick Check:

   Object matches constraint, returns id [OK]

Hint: Check if argument matches constraint to predict output [OK]

Common Mistakes:

• Assuming runtime error due to missing explicit type
• Confusing property existence with type errors
• Thinking generic constraints affect runtime output

4.

Identify the error in this TypeScript code and select the fix:

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

medium

A. Add constraint: <T extends { length: number }>

B. Change return type to void

C. Remove length property access

D. Use any instead of generic T

Solution

1. Step 1: Identify cause of error

   The generic type T has no guarantee to have a length property, so accessing arg.length causes a compile error.

2. Step 2: Fix by adding a constraint

   Adding T extends { length: number } ensures arg has a length property, fixing the error.

3. Final Answer:

   Add constraint: <T extends { length: number }> -> Option A

4. Quick Check:

   Constraint ensures property exists [OK]

Hint: Add extends constraint to guarantee properties exist [OK]

Common Mistakes:

• Ignoring missing property errors
• Changing return type instead of fixing constraint
• Using any defeats generic safety

5.

Given this interface and function, which call is valid and why?

interface Person {
  name: string;
  age: number;
}

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

const person: Person = { name: 'Alice', age: 30 };

Which call is valid?

hard

A. getProperty(person, 0)

B. getProperty(person, 'height')

C. getProperty(person, 'name')

D. getProperty(person, 'toString')

Solution

1. Step 1: Understand the generic constraints

   The function uses K extends keyof T, so the key must be a valid property name of T. For Person, valid keys are 'name' and 'age'.

2. Step 2: Evaluate each option

   getProperty(person, 'name') uses 'name', which is a valid key. getProperty(person, 'height') uses 'height', not in Person. getProperty(person, 0) uses 0, not a key. getProperty(person, 'toString') uses 'toString', which is a method on Object prototype, not a key of Person interface.

3. Final Answer:

   getProperty(person, 'name') -> Option C

4. Quick Check:

   Key must be keyof object type [OK]

Hint: Use keys from interface only with keyof constraint [OK]

Common Mistakes:

• Using keys not declared in interface
• Passing numbers instead of string keys
• Confusing prototype methods with interface keys