Super keyword behavior in Typescript - Step-by-Step Execution

Concept Flow - Super keyword behavior

Create subclass instance

↓

Call subclass constructor

↓

Inside subclass constructor: call super()

↓

Execute superclass constructor

↓

Return to subclass constructor

↓

Complete subclass constructor

↓

Instance ready with superclass and subclass properties

When creating a subclass, the constructor must call super() to run the superclass constructor first, setting up inherited properties before subclass code runs.

Execution Sample

Typescript

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark: () => string;
  constructor(name: string) {
    super(name);
    this.bark = () => 'Woof!';
  }
}

This code shows a Dog subclass calling super(name) to run Animal's constructor before adding its own property.

Execution Table

Step	Action	Context	Result
1	Create Dog instance with name 'Buddy'	Dog constructor starts	Dog instance creation begins
2	Call super(name) inside Dog constructor	Switch to Animal constructor	Animal constructor runs, sets this.name = 'Buddy'
3	Return from Animal constructor	Back to Dog constructor	Dog constructor continues
4	Define this.bark method	Dog constructor	this.bark set to function returning 'Woof!'
5	Dog constructor ends	Dog instance fully initialized	Dog instance has name='Buddy' and bark() method

💡 Dog instance created with inherited name property and subclass bark method after super() call

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
this.name	undefined	'Buddy'	'Buddy'	'Buddy'
this.bark	undefined	undefined	function () => 'Woof!'	function () => 'Woof!'

Key Moments - 2 Insights

Why must super() be called before using 'this' in the subclass constructor?

Because the superclass constructor initializes 'this'. The execution_table row 2 shows super() sets this.name. Using 'this' before super() causes an error.

What happens if super() is not called in a subclass constructor?

TypeScript throws an error. The subclass cannot access 'this' until super() runs, as shown by the flow in concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table at Step 2, what does super(name) do?

A Runs the Dog constructor again

B Defines the bark method

C Runs the Animal constructor and sets this.name

D Ends the Dog constructor

💡 Hint

Check Step 2 in execution_table where super(name) runs Animal constructor and sets this.name

At which step is the bark method added to the Dog instance?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at Step 4 in execution_table where this.bark is defined

If super() was omitted, what would happen when creating a Dog instance?

A TypeScript would throw an error about 'this' usage

B The bark method would be undefined

C The Dog instance would have no name property

D The Animal constructor would run twice

💡 Hint

Refer to key_moments explaining the need to call super() before using 'this'

Concept Snapshot

In TypeScript, a subclass constructor must call super() before accessing 'this'.
super() runs the superclass constructor to initialize inherited properties.
Without super(), using 'this' causes an error.
After super(), subclass can add its own properties or methods.
Always call super() first in subclass constructors.

Full Transcript

This visual execution trace shows how the super keyword works in TypeScript classes. When creating a subclass instance, the subclass constructor starts. It must call super() to run the superclass constructor first. This sets up inherited properties like 'name'. After super() finishes, the subclass constructor continues and can add its own properties like the bark method. The execution table shows each step: starting Dog constructor, calling super(name) which runs Animal constructor and sets this.name, returning to Dog constructor, defining bark, and finishing. The variable tracker shows how 'this.name' is undefined at start, set to 'Buddy' after super(), and 'this.bark' is undefined until defined later. Key moments explain why super() must be called before using 'this' and what happens if omitted. The quiz tests understanding of these steps. The snapshot summarizes the rule: always call super() first in subclass constructors to initialize 'this' and inherited properties.