How to Override a Class method in TypeScript

avatar
Borislav Hadzhiev

Last updated: Jan 23, 2023
4 min

banner

# 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 { override doMath(a: number, b: number): number { console.log(`result is ${a * b}`); // ๐Ÿ‘‡๏ธ this calls the parent's doMath method // super.doMath(a, b); return a * b; } } const child1 = new Child(); // ๐Ÿ‘‡๏ธ result is 100 child1.doMath(10, 10);

override class method in typescript

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'. override doMath(a: string, b: string): string { return a * b; } }

The doMath method in the Child class takes parameters of a different type and returns a value of a different type, which is not allowed.

# Use the super keyword to call the parent's method in the child class

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 { override 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`

use super keyword to call the parent method in child class

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

# Call the super() method when extending from a class with a constructor

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; } override 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.

# The override keyword in TypeScript

Notice that we used the override keyword when overriding the methods.

index.ts
override doMath(a: number, b: number): number { console.log(`result is ${a * b}`); return a * b; }

The override keyword solves the issue where:

  1. A parent class defines a method.
  2. A child class extends from the parent class and overrides the method.
  3. The parent class removes or renames the method.
  4. Now the child class isn't up to date.

When you use the override keyword, you make it clear that you meant to override an existing method and not to add a new method to the class.

When a method is marked with the override keyword, TypeScript makes sure that a method with the same name exists in the base class.

index.ts
class Parent { } class Child extends Parent { // โ›”๏ธ This member cannot have an 'override' modifier because it is not declared in the base class 'Parent'.ts(4113) override doMath(a: number, b: number): number { console.log(`result is ${a * b}`); return a * b; } }

The parent class doesn't have a doMath method, so trying to override it causes the type checker to throw an error.

If you want to always have to write the override keyword when overriding a method, update your tsconfig.json file.

tsconfig.json
{ "compilerOptions": { "noImplicitOverride": true, } }

Setting the noImplicitOverride method to true means that we have to use the override keyword every time we try to override a method.

If the method exists in the parent class and we try to define a method with the same name in the child class, we have to prefix the method name with override.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev