Generic class with constraints in Typescript - Step-by-Step Execution

Concept Flow - Generic class with constraints

Define generic class with constraint

↓

Create instance with valid type

↓

Use class methods with constrained type

↓

Access properties/methods allowed by constraint

↓

Compile-time check ensures type safety

↓

End

The flow shows defining a generic class with a type constraint, creating an instance with a valid type, using its methods, and ensuring type safety at compile time.

Execution Sample

Typescript

interface HasLength {
  length: number;
}

class Box<T extends HasLength> {
  constructor(public content: T) {}
  getLength() { return this.content.length; }
}

Defines a generic class Box that only accepts types with a length property, then returns that length.

Execution Table

Step	Action	Type T	content	Method Called	Result
1	Define interface HasLength	-	-	-	-
2	Define class Box<T extends HasLength>	-	-	-	-
3	Create Box instance with string 'hello'	string	'hello'	-	-
4	Call getLength() method	string	'hello'	getLength()	5
5	Create Box instance with array [1,2,3]	number[]	[1,2,3]	-	-
6	Call getLength() method	number[]	[1,2,3]	getLength()	3
7	Try to create Box instance with number 123 (error)	number	123	-	Error: number has no length
8	End	-	-	-	-

💡 Execution stops because number type does not satisfy the length constraint.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
content	-	'hello'	[1,2,3]	Error on 123

Key Moments - 2 Insights

Why can't we create Box<number> with a number like 123?

Because number does not have a length property, it violates the constraint T extends HasLength. See execution_table row 7 where this causes an error.

How does the getLength() method know that content has a length?

The constraint T extends HasLength guarantees content has a length property, so getLength() can safely access it. This is shown in rows 4 and 6.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what is the result of getLength() when content is 'hello'?

A Error

B 0

C 5

D undefined

💡 Hint

Check the Result column at step 4 in execution_table.

At which step does the code fail due to type constraint violation?

A Step 7

B Step 6

C Step 3

D Step 5

💡 Hint

Look for the Error message in the Result column in execution_table.

If we change the constraint to T extends { size: number }, what would happen when creating Box with a string?

A It works because string has size

B It fails because string has no size property

C It works only for arrays

D It always fails

💡 Hint

Recall that string has length but not size property; constraint requires size.

Concept Snapshot

Generic class with constraints syntax:
class ClassName<T extends Constraint> { ... }

- T must satisfy the constraint interface/type
- Ensures safe access to constrained properties
- Compile-time error if constraint violated
- Useful for flexible yet safe code

Full Transcript

This example shows how to define a generic class in TypeScript with a constraint on the generic type parameter. The interface HasLength requires a length property. The class Box<T extends HasLength> only accepts types that have length. When creating instances with string or array, getLength() returns the length property. Trying to create Box with a number causes a compile-time error because number has no length. This ensures type safety and prevents runtime errors.

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