Open In App

Method Overriding in TypeScript

Last Updated : 28 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will understand some of the necessary details which are associated with Method Overriding, further, we will see how to implement Method Overriding in TypeScript.

Method Overriding:

  • Method Overriding is the process in which a method belonging to the base (or parent) class is overridden by the same method (same method and signature) of the derived (child) class.
  • In this process, a child (derived) class method may or may not use the logic defined in the parent (base) class method.
  • In order to invoke the methods or properties of the base class, we may use the super keyword which would help us to invoke that particular method or property of the base class into the child class.
  • Method Overriding is useful whenever we want to alter the behavior of any method of the parent class in child class.

After analyzing all the basic facts associated with the Method Overriding in TypeScript, let us now see how we could implement Method Overriding in TypeScript with some of the following illustrated examples.

Example 1: In this example, we will declare two classes and inside the parent class we will declare one method which will be overridden by the child class with its own logic.

Javascript




class Boy {
    name : string
    about() : void {
        console.log(this.name +" is an intelligent boy..")
    }
}
   
class Student extends Boy {
    rollnumber : number;
    marks: number;
    constructor(rollnumber : number, marks : number, 
    name1 : string){
        super(); 
        this.rollnumber = rollnumber
        this.name = name1
        this.marks = marks
    }
    displayStudentInformation() : void {
        console.log("Name : "+ this.name +", Roll Number : "
        this.rollnumber +", 
        Scores : " + this.marks + " out of 100" )
    }
    about() : void{
        console.log(this.name + " scores well...")
    }
  
let student = new Student(2, 96, "Rohit");
student.displayStudentInformation();
student.about();


Output:

Name : Rohit, Roll Number : 2, Scores : 96 out of 100
Rohit scores well...

Example 2: In this example, we will display the result of the Parent class method also inside the child’s class overridden parent class method using the super keyword.

Javascript




class Boy {
    name : string
    about() : void {
        console.log(this.name +" is an intelligent boy..")
    }
}
   
class Student extends Boy {
    rollnumber : number;
    marks: number;
    constructor(rollnumber : number, marks : number, 
    name1 : string){
        super(); 
        this.rollnumber = rollnumber
        this.name = name1
        this.marks = marks
    }
    displayStudentInformation() : void {
        console.log("Name : "+ this.name +", Roll Number : "
        this.rollnumber +", 
        Scores : " + this.marks + " out of 100" )
    }
    about() : void {
        // Invokes parent class about() method here also.
        super.about(); 
        console.log(this.name + " scores well...")
    }
  
let student = new Student(2, 96, "Rohit");
student.displayStudentInformation();
student.about();


Output:

Name : Rohit, Roll Number : 2, Scores : 96 out of 100
Rohit is an intelligent boy..
Rohit scores well...

Reference: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html#override-and-the—noimplicitoverride-flag



Similar Reads

Function overloading and Overriding in PHP
Function overloading and overriding is the OOPs feature in PHP. In function overloading, more than one function can have same method signature but different number of arguments. But in case of function overriding, more than one functions will have same method signature and number of arguments. Function Overloading: Function overloading contains sam
3 min read
How to prevent overriding using fake namespace in JavaScript ?
Overriding is basically when you define multiple functions or variables that have the same name, the last one defined will override all the previously defined ones and every time when you invoke a function, the last defined one will get executed. Overriding usually happens when you have multiple javascript files in your page. It can be an external
2 min read
How to prevent overriding using Immediately Invoked Function Expression in JavaScript ?
Overriding is basically when you define multiple functions or variables that have the same name, the last one defined will override all the previously defined ones and every time when you invoke a function, the last defined one will get executed. Overriding usually happens when you have multiple javascript files in your page. It can be an external
2 min read
How CSS style overriding works ?
In this article, we are going to learn how CSS style overriding works. Cascading Style Sheets referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web pag
3 min read
TypeScript | toExponential() Method
The toExponential() method in TypeScript is used to convert a number to its exponential form. This method returns a string representing the given number object in exponential notation according to the given parameter. Syntax: number.toExponential( [fractionDigits] ) Parameters: This method accepts a single parameter as mentioned above and described
1 min read
TypeScript | String charAt() Method
The charAt() method in TypeScript is used to return the character at the specified index of the string. The characters string are indexed from left to right. Syntax: string.charAt( index ) Parameter: This method accepts a single parameter as mentioned above and described below: index: It is an integer value between 0 and 1 less than the length of t
1 min read
TypeScript | String charCodeAt() Method
The charCodeAt() is an inbuilt function in TypeScript which is used to return the number indicating the Unicode value of the character at the specified index. Syntax: string.charCodeAt(index); Parameter: This method accept a single parameter as mentioned above and described below. index This parameter is an integer between 0 and 1 less than the len
1 min read
TypeScript | String concat() Method
The concat() is an inbuilt function in TypeScript which is used to add two or more strings and returns a new single string. Syntax: string.concat(string2, string3[, ..., stringN]); Parameter: This method accept a single parameter as mentioned above and described below. string2...stringN: This parameter holds the strings which will be concatenate. R
1 min read
TypeScript | String indexOf() Method
The indexOf() is an inbuilt function in TypeScript which is used to get the index within the calling String object of the first occurrence of the specified value. Syntax: string.indexOf(searchValue[, fromIndex]) Parameter: This method accepts two parameter as mentioned above and described below . searchValue: This parameter is a string representing
1 min read
TypeScript | String lastIndexOf() Method
The lastIndexOf() is an inbuilt function in TypeScript which is used to get the index within the calling String object of the last occurrence of the specified value. Syntax: string.lastIndexOf(searchValue[, fromIndex]) Parameter: This method accepts two parameter as mentioned above and described below: searchValue: This parameter is a string repres
1 min read