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.

Practice

1.

What does the super keyword do in TypeScript classes?

easy

A. It defines a static method inside a class.

B. It creates a new instance of the child class.

C. It allows a child class to access and call methods or constructors from its parent class.

D. It declares a private property in the class.

Solution

1. Step 1: Understand the role of super

   The super keyword is used in child classes to refer to their parent class.

2. Step 2: Identify what super accesses

   It allows calling the parent class constructor or methods from the child class.

3. Final Answer:

   It allows a child class to access and call methods or constructors from its parent class. -> Option C

4. Quick Check:

   super accesses parent features = A [OK]

Hint: Remember: super connects child to parent class features [OK]

Common Mistakes:

• Thinking super creates new instances
• Confusing super with static method declaration
• Assuming super declares properties

2.

Which of the following is the correct way to call a parent class constructor inside a child class constructor?

class Parent { constructor(name: string) {} } 
class Child extends Parent { 
  constructor(name: string) { 
    ? 
  } 
}

easy

A. super(name);

B. this.super(name);

C. Parent(name);

D. super.constructor(name);

Solution

1. Step 1: Recall syntax for calling parent constructor

   In TypeScript, inside a child constructor, super() calls the parent constructor.

2. Step 2: Match correct syntax

   The correct call is super(name); to pass the argument to the parent.

3. Final Answer:

   super(name); -> Option A

4. Quick Check:

   Parent constructor call = super(name) [OK]

Hint: Use super(args) to call parent constructor inside child [OK]

Common Mistakes:

• Using this.super() which is invalid
• Calling parent class name like a function
• Trying super.constructor() which is incorrect

3.

What will be the output of the following TypeScript code?

class Animal {
  speak() { return 'Animal sound'; }
}
class Dog extends Animal {
  speak() { return super.speak() + ' and Bark'; }
}
const dog = new Dog();
console.log(dog.speak());

medium

A. "Animal sound"

B. "Bark"

C. Runtime error

D. "Animal sound and Bark"

Solution

1. Step 1: Understand method overriding and super

   The Dog class overrides speak() and calls super.speak() to get the parent method's return.

2. Step 2: Combine parent and child method outputs

   super.speak() returns "Animal sound", then " and Bark" is added.

3. Final Answer:

   "Animal sound and Bark" -> Option D

4. Quick Check:

   super method call adds parent output = D [OK]

Hint: super.method() adds parent method result inside child override [OK]

Common Mistakes:

• Expecting only 'Bark' without parent sound
• Thinking it causes an error
• Ignoring super call inside method

4.

Identify the error in this TypeScript code snippet:

class Base {
  constructor() { console.log('Base constructor'); }
}
class Derived extends Base {
  constructor() {
    console.log('Derived constructor');
    super();
  }
}

medium

A. Missing call to super() before using this or other statements.

B. Calling super() after a statement in constructor causes error.

C. The super() call is correct and no error occurs.

D. The Derived class must not have a constructor.

Solution

1. Step 1: Recall constructor rules in derived classes

   In TypeScript, super() must be called before any other statement in a derived class constructor.

2. Step 2: Identify the error in code order

   The code calls console.log before super(), which is invalid and causes a runtime error.

3. Final Answer:

   Calling super() after a statement in constructor causes error. -> Option B

4. Quick Check:

   super() must be first in constructor [OK]

Hint: Always call super() first in child constructor [OK]

Common Mistakes:

• Calling super() after other code
• Thinking super() can be omitted
• Assuming no error if super() is late

5.

Given the following classes, what will console.log(new C().getValue()); print?

class A {
  value = 1;
  getValue() { return this.value; }
}
class B extends A {
  value = 2;
  getValue() { return super.getValue() + this.value; }
}
class C extends B {
  value = 3;
  getValue() { return super.getValue() + this.value; }
}

hard

A. 9

B. 3

C. 6

D. 5

Solution

1. Step 1: Evaluate C.getValue() call

   C.getValue() calls super.getValue() (which is B.getValue()) plus this.value (3).

2. Step 2: Evaluate B.getValue() call

   B.getValue() calls super.getValue() (which is A.getValue()) plus this.value (3, because this is instance of C).

3. Step 3: Evaluate A.getValue() call

   A.getValue() returns this.value, which is 3 (from C instance).

4. Step 4: Calculate total

   So, A.getValue() = 3, B.getValue() = 3 + 3 = 6, C.getValue() = 6 + 3 = 9.

5. Step 5: Reconsider value property shadowing

   However, each class defines its own value property. But this.value always refers to C's value (3) because this is the instance of C.

6. Final Answer:

   9 -> Option A

7. Quick Check:

   super calls chain add values = 9 [OK]

Hint: Remember this refers to child instance, not parent [OK]

Common Mistakes:

• Assuming this.value changes in each class
• Ignoring this binding to child instance
• Adding only parent values without child