Borislav Hadzhiev
Thu Mar 10 2022·2 min read
Photo by Jared Rice
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.
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.
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:
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.
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.
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
.