TypeScript – Method Overriding
Method Overriding is a process of overthrowing a method of super class by method of same name and parameters in sub class.
Method Overriding is useful when sub class wants to modify the behavior of super class for certain tasks.
Example
Following is a simple example of method overriding where eat() method of Student class overrides the eat() method of Person class.
class Person{
name:string
eat():void{
console.log(this.name+" eats when hungry.")
}
}
class Student extends Person{
// variables
rollnumber:number;
// constructors
constructor(rollnumber:number, name1:string){
super(); // calling Parent's constructor
this.rollnumber = rollnumber
this.name = name1
}
// functions
displayInformation():void{
console.log("Name : "+this.name+", Roll Number : "+this.rollnumber)
}
// overriding super class method
eat():void{
console.log(this.name+" eats during break.")
}
}
var student1 = new Student(2, "Rohit")
student1.displayInformation()
student1.eat()
When the above .ts program is compiled to .js file.
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Person = /** @class */ (function () {
function Person() {
}
Person.prototype.eat = function () {
console.log(this.name + " eats when hungry.");
};
return Person;
}());
var Student = /** @class */ (function (_super) {
__extends(Student, _super);
// constructors
function Student(rollnumber, name1) {
var _this = _super.call(this) || this;
_this.rollnumber = rollnumber;
_this.name = name1;
return _this;
}
// functions
Student.prototype.displayInformation = function () {
console.log("Name : " + this.name + ", Roll Number : " + this.rollnumber);
};
// overriding super class method
Student.prototype.eat = function () {
console.log(this.name + " eats during break.");
};
return Student;
}(Person));
var student1 = new Student(2, "Rohit");
student1.displayInformation();
student1.eat();
You can execute .js file using a javascript online editor by copying the javascript code to the code editor,
Name : Rohit, Roll Number : 2 VM73:35 Rohit eats during break.
Call Super Class Methods from Sub-Class
Immediate super class methods could be called from sub class using super keyword.
eat():void{ super.eat() console.log(this.name+" eats during break.") }
Replace this method with that of in Student class and run the program.
The eat() method in Person class is executed for super.eat().
Conclusion
In this TypeScript Tutorial, we have learnt to override the behavior of parent classes using Method Overriding with the help of Example TypeScript program.