Method Overriding in TypeScript?

The method overriding means writing the new definition of the method in the inherited class by keeping the method name, parameters, and return type the same. In this tutorial, we will learn about the method overriding in TypeScript.

Inheritance is one of the four pillars of object-oriented programming. The method overriding feature of the OOPs is helpful with the inheritance. For example, we can define the method in the parent class and redefine the method with the same name, parameter, and return type into the base class with a different code to execute, and that’s how method overriding comes into the picture.

Syntax

Users can follow the syntax below to learn the method overriding.

class Vehicle {
   // Info method in parent class
   info(): void {
      console.log("The object is the vehicle.");
   }
}

class car extends Vehicle {
   // Same info method overriden in base class
   info(): void {
      console.log("The object is a car.");
   }
}

let new_vehicle = new car();
new_vehicle.info();

In the above syntax, users can see that we have defined the info() method in the parent class. Also, we have defined the info method with the same name in the base class. Also, we created the object of the base class and invoked the info() method, which will call the info() method of the base class.

Steps

• Step 1 − Create the vehicle class using the class keyword.

• Step 2 − Define the info() method inside the vehicle class, which prints the message “The object is a vehicle”.

• Step 3 − Create the car class, which extends the vehicle class. Also, define some variables inside the car class.

• Step 4 − Furthermore, override the info() method of the vehicle class in the car class, which gives the information about the car rather than the general vehicle.

• Step 5 − Create the get_size() method inside the car class.

• Step 6 − At last, create the object of the car class and invoke the info() and get_size() methods by taking the object as a reference.

Example 1

In the example below, the car class is inherited by the Vehicle class, which overrides the info() method of the Vehicle class.

class Vehicle {
   info(): void {
      console.log("The object is the vehicle.");
   }
}

class car extends Vehicle {
   name: string = "car";
   color: string = "Black";
   size: number = 6;
   info(): void {
      console.log("The object is a " + this.name);
      console.log("The color of the car is " + this.color);
   }
   get_size(): void {
      console.log("The length of the car in the feet is " + this.size);
   }
}

let new_vehicle = new car();
// Call the info method of the car class
new_vehicle.info();
// call the get_size() method of the car class
new_vehicle.get_size();

On compiling, it will generate the following JavaScript code −

var __extends = (this && this.__extends) || (function () {
   var extendStatics = function (d, b) {
      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 extendStatics(d, b);
   };
   return function (d, b) {
      extendStatics(d, b);
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
})();
var Vehicle = /** @class */ (function () {
   function Vehicle() {
   }
   Vehicle.prototype.info = function () {
      console.log("The object is the vehicle.");
   };
   return Vehicle;
}());
var car = /** @class */ (function (_super) {
   __extends(car, _super);
   function car() {
      var _this = _super !== null && _super.apply(this, arguments) || this;
      _this.name = "car";
      _this.color = "Black";
      _this.size = 6;
      return _this;
   }
   car.prototype.info = function () {
      console.log("The object is a " + this.name);
      console.log("The color of the car is " + this.color);
   };
   car.prototype.get_size = function () {
      console.log("The length of the car in the feet is " + this.size);
   };
   return car;
}(Vehicle));
var new_vehicle = new car();
// Call the info method of the car class
new_vehicle.info();
// call the get_size() method of the car class
new_vehicle.get_size();

Output

The above code will produce the following output −

The object is a car
The color of the car is Black
The length of the car in the feet is 6

Example 2

In the example below, we created the employee class and extended the men class by the employee class. The about() method of the employee class tells us about the general employee.

The about method of the men class overrides the about() method of employee class by adding some extra information to the about() method. Also, we have invoked the about() method of the employee class using the super keyword inside the about() method of men class.

// Creating the employee class containing the about method
class Employee {
   about(): void {
      console.log("Inside the employee class.");
   }
}

// Men calss overriding the about method of employee class
class men extends Employee {
   gender: string = "Male";
   about(): void {
      // calling the about method of the employee class
      super.about();
      console.log("The gender of the Employee is " + this.gender);
   }
}
// Invoking the about method of men class
let new_men = new men();
new_men.about();

On compiling, it will generate the following JavaScript code −

var __extends = (this && this.__extends) || (function () {
   var extendStatics = function (d, b) {
      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 extendStatics(d, b);
   };
   return function (d, b) {
      extendStatics(d, b);
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
})();
// Creating the employee class containing the about method
var Employee = /** @class */ (function () {
   function Employee() {
   }
   Employee.prototype.about = function () {
      console.log("Inside the employee class.");
   };
    return Employee;
}());
// Men calss overriding the about method of employee class
var men = /** @class */ (function (_super) {
   __extends(men, _super);
   function men() {
      var _this = _super !== null && _super.apply(this, arguments) || this;
      _this.gender = "Male";
      return _this;
   }
   men.prototype.about = function () {
      // calling the about method of the employee class
      _super.prototype.about.call(this);
      console.log("The gender of the Employee is " + this.gender);
   };
    return men;
}(Employee));
// Invoking the about method of men class
var new_men = new men();
new_men.about(); 

Output

The above code will produce the following output −

Inside the employee class.
The gender of the Employee is Male

Example 3

In the example below, we have overridden the operation() method of the sum class in the multiply class with the same parameter and return type.

class sum {
   operation(a: number, b: number): number {
      return a + b;
   }
}

class multiply extends sum {
  // Override the operation method by keeping parameters and return type same
   operation(a: number, b: number): number {
      return a * b;
   }
}

let multi = new multiply();
let result = multi.operation(10, 20);
console.log(
  "Result after performing calling the operation method is " + result
);

On compiling, it will generate the following JavaScript code −

var __extends = (this && this.__extends) || (function () {
   var extendStatics = function (d, b) {
      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 extendStatics(d, b);
   };
   return function (d, b) {
      extendStatics(d, b);
      function __() { this.constructor = d; }
      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
   };
})();
var sum = /** @class */ (function () {
   function sum() {
   }
   sum.prototype.operation = function (a, b) {
      return a + b;
   };
   return sum;
}());
var multiply = /** @class */ (function (_super) {
   __extends(multiply, _super);
   function multiply() {
      return _super !== null && _super.apply(this, arguments) || this;
   }
   // Override the operation method by keeping parameters and return type same
   multiply.prototype.operation = function (a, b) {
      return a * b;
   };
   return multiply;
}(sum));
var multi = new multiply();
var result = multi.operation(10, 20);
console.log("Result after performing calling the operation method is " + result);

Output

The above code will produce the following output −

Result after performing calling the operation method is 200

Users learned to override the method in TypeScript. In the first example, users learned to override the parent class method in the base class simply. In the second example, users learned to invoke the method of the superclass while overriding the method. In the third example, users learned to override the parameterized method.