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.