Override a Class method in TypeScript

avatar

Borislav Hadzhiev

Thu Mar 10 20222 min read

banner

Photo by Jared Rice

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
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
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
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
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.

Use the search field on my Home Page to filter through my more than 1,000 articles.