Super keyword behavior in Typescript

Introduction

The super keyword helps you use or extend features from a parent class inside a child class.

When you want a child class to use or add to a method from its parent class.

When you need to call the parent class constructor to set up inherited properties.

When overriding a method but still want to keep the original behavior from the parent.

When you want to reuse code from the parent class without rewriting it.

Syntax

Typescript

class Parent {
  constructor() {}
  method() {}
}

class Child extends Parent {
  constructor() {
    super();
  }
  method() {
    super.method();
  }
}

super() must be called in the child constructor before using this.

You can use super.methodName() to call a specific method from the parent.

Examples

Calls the parent constructor to print the animal name before printing dog creation.

Typescript

class Animal {
  constructor(name: string) {
    console.log(`Animal created: ${name}`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
    console.log('Dog created');
  }
}

Calls the parent greet method, then adds extra greeting.

Typescript

class Person {
  greet() {
    console.log('Hello from Person');
  }
}

class Student extends Person {
  greet() {
    super.greet();
    console.log('Hello from Student');
  }
}

Sample Program

This program shows how super calls the parent constructor and method, then the child adds its own message.

Typescript

class Vehicle {
  constructor(public brand: string) {}
  start() {
    console.log(`${this.brand} vehicle started.`);
  }
}

class Car extends Vehicle {
  constructor(brand: string, public model: string) {
    super(brand);
  }
  start() {
    super.start();
    console.log(`${this.model} car is ready to go!`);
  }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.start();

Important Notes

Always call super() first in the child constructor before using this.

You can use super to access parent methods even if you override them in the child.

Summary

super lets child classes use or extend parent class features.

Use super() in constructors to call the parent constructor.

Use super.method() to call a parent method inside an overridden method.

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