Override a Class method in TypeScript

Override a Class method in TypeScript #

To override a class method in TypeScript, extend from the parent class and define a method with the same name. Note that the types of the parameters and the return type of the method have to be compatible with the parent's implementation.

index.ts

Copied!
class Parent {
  doMath(a: number, b: number): number {
    console.log(`result is: ${a + b}`);
    return a + b;
  }
}

class Child extends Parent {
  doMath(a: number, b: number): number {
    console.log(`result is ${a * b}`);

    // 👇️ this calls parent's doMath method
    // super.doMath(a, b);

    return a * b;
  }
}

const child1 = new Child();

// 👇️ result is 100
child1.doMath(10, 10);

The Parent class in the example defines a doMath method. The method takes 2 parameters of type number and returns a number.

The Child class extends from Parent and overrides its doMath method.

Note that the type of the doMath method in the Child class has to conform to the type of the method in the Parent.

If there is a mismatch in the typings of the methods, you would get an error:

index.ts

Copied!
class Parent {
  doMath(a: number, b: number): number {
    console.log(`result is: ${a + b}`);
    return a + b;
  }
}

class Child extends Parent {
  // ⛔️ Error: Property 'doMath' in type 'Child' is
  // not assignable to the same property in base type 'Parent'.
  doMath(a: string, b: string): string {
    return a * b;
  }
}

If you need to call the parent's implementation of the method, use the super keyword.

index.ts

Copied!
class Parent {
  doMath(a: number, b: number): number {
    console.log(`result is: ${a + b}`);
    return a + b;
  }
}

class Child extends Parent {
  doMath(a: number, b: number): number {
    console.log(`result is ${a * b}`);

    // 👇️ this calls parent's doMath method
    super.doMath(a, b);

    return a * b;
  }
}

const child1 = new Child();

// 👇️ result is 100
child1.doMath(10, 10);

// 👉️ parent's method logs `result is: 20`

The super keyword is used to access and call methods on an object's parent.

When extending from a class with a constructor method, you have to call super() in the child's constructor before you are able to use the this keyword.

index.ts

Copied!
class Parent {
  name = 'Parent';

  constructor(public a: number, public b: number) {
    this.a = a;
    this.b = b;
  }

  doMath(): number {
    console.log(`result is: ${this.a + this.b}`);
    return this.a + this.b;
  }
}

class Child extends Parent {
  name = 'Child';

  constructor(public a: number) {
    // 👇️ Call super here
    super(a, a);

    this.a = a;
  }

  doMath(): number {
    console.log(`result is ${this.a * this.a}`);

    // 👇️ this calls parent's doMath method
    super.doMath();

    return this.a * this.a;
  }
}

const child1 = new Child(100);

// 👇️ result is 10000
child1.doMath();

// 👉️ parent's method logs `result is: 200`

The Child class has a constructor method, so we had to call super() to execute the parent's constructor before we are able to use the this keyword in the Child.

Override a Class method in TypeScript

Override a Class method in TypeScript #

Borislav Hadzhiev