TypeScript – Method Overriding

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