Generic class with constraints in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic class with a constraint that T must have a 'length' property.

Typescript

class Container<[1]> {
  value: T;
  constructor(value: T) {
    this.value = value;
  }
  getLength(): number {
    return this.value.length;
  }
}

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

AT extends boolean

BT extends number

CT extends string

DT extends { length: number }

Attempts:

3 left

💡 Hint

Common Mistakes

Using a primitive type like number or boolean as a constraint which don't have length property.

Not using extends keyword to constrain the generic type.

The generic type T is constrained to types that have a length property of type number. This allows accessing this.value.length safely.

2fill in blank

medium

Complete the code to create an instance of the generic class with a string, which satisfies the constraint.

Typescript

const stringContainer = new Container<[1]>("hello");

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

Astring

Bnumber

Cboolean

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean which do not have length property.

Using object without specifying length property.

The generic type parameter is string because strings have a length property, satisfying the constraint.

3fill in blank

hard

Fix the error in the generic class declaration by completing the constraint correctly.

Typescript

class DataHolder<[1]> {
  data: T;
  constructor(data: T) {
    this.data = data;
  }
  getSize(): number {
    return this.data.length;
  }
}

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

AT extends boolean

BT extends number

CT extends { length: number }

DT extends null

Attempts:

3 left

💡 Hint

Common Mistakes

Using primitive types like number or boolean which do not have length property.

Not using extends keyword.

The constraint T extends { length: number } ensures that data.length is valid.

4fill in blank

hard

Fill both blanks to define a generic class that accepts types with a 'length' property and a method that returns the length.

Typescript

class LengthChecker<[1]> {
  item: T;
  constructor(item: T) {
    this.item = item;
  }
  getLength(): [2] {
    return this.item.length;
  }
}

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

AT extends { length: number }

Bstring

Cnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect return type for getLength.

Not constraining T to have length property.

The generic type T is constrained to have a length property. The method getLength returns a number because length is a number.

5fill in blank

hard

Fill all three blanks to create a generic class with a constraint, a constructor, and a method that returns the length of the stored value.

Typescript

class GenericLength<[1]> {
  value: T;
  constructor([2]: T) {
    this.value = [3];
  }
  length(): number {
    return this.value.length;
  }
}

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

AT extends { length: number }

Bvalue

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parameter name different from the assigned variable.

Not constraining the generic type.

The generic type T is constrained to have a length property. The constructor takes a parameter named value and assigns it to the class property this.value.

Practice

1. What is the main purpose of using constraints in a generic class in TypeScript?

easy

A. To ensure the generic type has specific properties or methods

B. To make the class run faster

C. To allow any type without restrictions

D. To convert the generic type to a string

Solution

1. Step 1: Understand generic constraints

   Constraints limit the types that can be used with a generic to those having certain properties or methods.

2. Step 2: Identify the purpose of constraints

   This ensures the generic class can safely use those properties or methods without errors.

3. Final Answer:

   To ensure the generic type has specific properties or methods -> Option A

4. Quick Check:

   Constraints = limit types by properties/methods [OK]

Hint: Constraints limit types to those with needed features [OK]

Common Mistakes:

• Thinking constraints improve performance
• Believing constraints allow any type
• Confusing constraints with type conversion

2. Which of the following is the correct syntax to declare a generic class with a constraint that T must have a 'length' property?

easy

A. class Box {}

B. class Box {}

C. class Box {}

D. class Box {}

Solution

1. Step 1: Recall TypeScript generic constraint syntax

   TypeScript uses extends keyword to constrain generics.

2. Step 2: Match syntax for property constraint

   To require a property, use an object type with that property, e.g., { length: number }.

3. Final Answer:

   class Box<T extends { length: number }> {} -> Option D

4. Quick Check:

   Generic constraints use extends with type shape [OK]

Hint: Use 'extends' with object type for constraints [OK]

Common Mistakes:

• Using 'where' or 'with' keywords (not valid in TypeScript)
• Using colon ':' instead of 'extends'
• Omitting the property type in constraint

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

class Container<T extends { name: string }> {
  item: T;
  constructor(item: T) {
    this.item = item;
  }
  getName() {
    return this.item.name;
  }
}

const obj = { name: 'Box', size: 10 };
const c = new Container(obj);
console.log(c.getName());

medium

A. undefined

B. 'Box'

C. Error: Property 'name' does not exist

D. null

Solution

1. Step 1: Analyze the generic constraint and object

   The class requires T to have a 'name' string property. The object has 'name' and 'size', so it fits.

2. Step 2: Understand method getName()

   It returns this.item.name, which is 'Box' from the object.

3. Final Answer:

   'Box' -> Option B

4. Quick Check:

   Accessing constrained property returns 'Box' [OK]

Hint: Check if object matches constraint properties [OK]

Common Mistakes:

• Assuming extra properties cause errors
• Thinking output is undefined if extra props exist
• Confusing runtime errors with compile-time checks

4. Identify the error in this TypeScript generic class declaration:

class DataHolder<T extends number | string> {
  value: T;
  constructor(value: T) {
    this.value = value;
  }
  printValue() {
    console.log(this.value.toFixed(2));
  }
}

medium

A. toFixed is not available on string type

B. Generic constraint syntax is incorrect

C. Missing return type for printValue method

D. Constructor parameter type mismatch

Solution

1. Step 1: Check the generic constraint

   T can be number or string, so value can be either type.

2. Step 2: Analyze method printValue()

   It calls toFixed(2), which exists on number but not on string. TypeScript will produce a compile-time error because toFixed is not available on all possible types for T.

3. Final Answer:

   toFixed is not available on string type -> Option A

4. Quick Check:

   Method uses number-only function on union type [OK]

Hint: Check method compatibility with all constraint types [OK]

Common Mistakes:

• Ignoring union type method availability
• Thinking constraint syntax is wrong
• Assuming missing return type causes error here

5. You want to create a generic class KeyValueStore that only accepts types with a key property of type string and a value property of any type. Which of the following is the correct way to declare this class?

hard

A. class KeyValueStore<T with key: string, value: any> { constructor(public item: T) {} }

B. class KeyValueStore<T> where T has key: string, value: any { constructor(public item: T) {} }

C. class KeyValueStore<T extends { key: string; value: any }> { constructor(public item: T) {} }

D. class KeyValueStore<T: { key: string; value: any }> { constructor(public item: T) {} }

Solution

1. Step 1: Recall TypeScript generic constraint syntax

   Use extends with an object type to constrain T to have specific properties.

2. Step 2: Match the required properties

   The constraint must require key: string and value: any properties.

3. Step 3: Verify constructor syntax

   The constructor correctly accepts an item of type T and assigns it.

4. Final Answer:

   class KeyValueStore<T extends { key: string; value: any }> { constructor(public item: T) {} } -> Option C

5. Quick Check:

   Use extends with object type for property constraints [OK]

Hint: Use 'extends' with object type for property constraints [OK]

Common Mistakes:

• Using 'where' or 'with' keywords (not valid in TypeScript)
• Using colon ':' instead of 'extends'
• Omitting property types in constraint