Mastering TypeScript/

...

/

The super Function and Function Overriding

The super Function and Function Overriding

Learn how to use the super keyword to call base class constructors and method overrides.

We'll cover the following...

The super function

When using inheritance, it is quite common for a base class and a derived class to implement the same method. This is seen most often with class constructors. If a derived class has a constructor, then this constructor must call the base class constructor using the super keyword, or TypeScript will generate an error as follows:

TypeScript 4.9.5
// Class definition for BaseClassWithCtor
class BaseClassWithCtor {
  // private property to store the id
  private id: number;
  // constructor to initialize the id
  constructor(id: number) {
    this.id = id;
  }
}
// Class definition for DerivedClassWithCtor that extends BaseClassWithCtor
class DerivedClassWithCtor
  extends BaseClassWithCtor {
  // private property to store the name
  private name: string;
  // constructor to initialize the id and name
  constructor(id: number, name: string) {
    // calling the super constructor to initialize the id
    super(id);
    this.name = name;
  }
}
Using the super keyword

  • We define a class named BaseClassWithCtor from lines 2–10 that has a single property named id of type number and also defines a constructor function that initializes this id property.

  • We then define a class named DerivedClassWithCtor from ...