Generic class syntax in Typescript - Step-by-Step Execution

Concept Flow - Generic class syntax

Define Generic Class with <T>

↓

Create Instance with Specific Type

↓

Use Instance Methods/Properties with Type T

↓

Type Safety Ensured at Compile Time

↓

End

This flow shows how a generic class is defined with a placeholder type T, then instantiated with a real type, and used with type safety.

Execution Sample

Typescript

class Box<T> {
  content: T;
  constructor(value: T) {
    this.content = value;
  }
  getContent(): T {
    return this.content;
  }
}

const box = new Box<number>(123);
console.log(box.getContent());

Defines a generic class Box that holds a value of type T, creates a Box of number, and prints its content.

Execution Table

Step	Action	Evaluation	Result
1	Define class Box<T>	Generic class with type parameter T	Class Box<T> created
2	Create instance box = new Box<number>(123)	T is number, value is 123	box.content = 123
3	Call box.getContent()	Returns content of type number	Returns 123
4	console.log output	Prints returned value	123 printed to console
5	End	No more code	Execution stops

💡 All steps completed, program ends after printing 123

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
box.content	undefined	123	123	123

Key Moments - 3 Insights

Why do we write <T> after the class name?

The <T> declares a placeholder type for the class. It means the class can work with any type, which is set when creating an instance (see execution_table step 1 and 2).

What type does box.content have?

box.content has the type number because we created Box<number> (see variable_tracker and execution_table step 2). This ensures type safety.

What happens if we try to put a string in Box<number>?

TypeScript will give an error because the class expects a number, not a string. This is shown by the type parameter T being fixed to number at instance creation (execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of box.content after step 2?

A 123

B "123" (string)

C undefined

D null

💡 Hint

Check variable_tracker column 'After Step 2' for box.content value.

At which step does the program print the number 123 to the console?

A Step 1

B Step 4

C Step 3

D Step 5

💡 Hint

Look at execution_table row where console.log output happens.

If we change Box<number> to Box<string>, what type will box.content have?

A number

B any

C string

D unknown

💡 Hint

Generic type T is replaced by the type given at instance creation (see concept_flow and execution_table step 2).

Concept Snapshot

Generic class syntax:
class ClassName<T> {
  property: T;
  constructor(value: T) { this.property = value; }
  method(): T { return this.property; }
}
Use: const obj = new ClassName<Type>(value);
Ensures type safety with flexible types.

Full Transcript

This example shows how to define and use a generic class in TypeScript. The class Box has a type parameter T, which acts like a placeholder for any type. When we create an instance of Box, we specify the actual type, like number. The class stores a value of that type and returns it with a method. The execution table traces each step: defining the class, creating an instance with number, calling the method, and printing the result. The variable tracker shows how box.content changes from undefined to 123. Key moments clarify why we use <T>, what type box.content has, and what happens if we try to use the wrong type. The quiz tests understanding of variable values, output timing, and type substitution. The snapshot summarizes the syntax and usage for quick reference.