TypeScript Method Overriding

Method overriding in TypeScript occurs when a subclass provides its own implementation of an inherited method. The overriding method uses the same method name and must remain compatible with the method declared by the parent class.

Overriding lets a subclass specialize inherited behavior without changing the parent class. When the method is called on a subclass object, the subclass implementation runs.

TypeScript Method Overriding Syntax

A class must extend another class before it can override one of its methods. The optional override keyword tells TypeScript that the method is intended to replace an inherited member.

</>
Copy
class Parent {
    methodName(value: string): void {
        // Parent implementation
    }
}

class Child extends Parent {
    override methodName(value: string): void {
        // Child implementation
    }
}

The override keyword was introduced in TypeScript 4.3. It does not change runtime behavior, but it allows the compiler to detect cases where the parent method was renamed, removed, or declared with an incompatible signature.

Example of Method Overriding in TypeScript

In the following example, the eat() method of the Student class overrides the method with the same name in the 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()

The Student object has access to members inherited from Person. However, calling student1.eat() selects the implementation defined by Student.

When the above .ts program is compiled to .js file.

var __extends = (this &amp;&amp; this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array &amp;&amp; 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 a Parent Method with super in TypeScript

An overriding method can call the parent implementation through super.methodName(). This is useful when the subclass needs to retain the original behavior and add its own processing before or after it.

    eat():void{
        super.eat()
        console.log(this.name+" eats during break.")
    }

Replace the eat() method in Student with this version. The call to super.eat() executes Person.eat(), after which the second message is printed by the subclass method.

Rohit eats when hungry.
Rohit eats during break.

Use the TypeScript override Keyword

Adding override makes the intention explicit and helps the compiler identify accidental mismatches. Consider a parent method named calculateFee() and a subclass that overrides it:

</>
Copy
class Membership {
    calculateFee(): number {
        return 500;
    }
}

class StudentMembership extends Membership {
    override calculateFee(): number {
        return 300;
    }
}

const membership = new StudentMembership();
console.log(membership.calculateFee());
300

If calculateFee() does not exist in the parent class, TypeScript reports an error on the member marked override. Without that keyword, a misspelled method could be treated as an unrelated new method.

Require override with noImplicitOverride

The noImplicitOverride compiler option requires inherited members to be marked with override. Enabling it is useful when refactoring a class hierarchy because accidental overrides are reported during compilation.

</>
Copy
{
  "compilerOptions": {
    "noImplicitOverride": true
  }
}

With this option enabled, omitting override from a method that replaces an inherited member produces a compiler error.

TypeScript Override Method Signature Rules

An overridden method must remain usable wherever the parent method is expected. A subclass should not require arguments that callers of the parent method are not required to provide. Return values must also be compatible with the parent declaration.

</>
Copy
class MessageFormatter {
    format(message: string): string {
        return message;
    }
}

class PrefixFormatter extends MessageFormatter {
    override format(message: string): string {
        return `Notice: ${message}`;
    }
}

Changing the child method to require an additional parameter would make the override incompatible:

</>
Copy
class InvalidFormatter extends MessageFormatter {
    override format(message: string, prefix: string): string {
        return `${prefix}: ${message}`;
    }
}

A caller holding a MessageFormatter reference is allowed to pass only one argument. Requiring a second argument in the subclass would violate that contract, so TypeScript rejects the declaration. If extra information is optional, an optional parameter may be appropriate, provided the resulting signature remains compatible.

Override a TypeScript Property or Accessor

The override modifier also applies to inherited properties and accessors. The child declaration must be compatible with the parent member.

</>
Copy
class Product {
    readonly category: string = "General";

    get label(): string {
        return "Product";
    }
}

class Book extends Product {
    override readonly category: string = "Books";

    override get label(): string {
        return "Book";
    }
}

Use care when changing a property into an accessor or changing whether a member can be written. Code compiled to different ECMAScript targets can have different initialization behavior, so inherited field declarations should be tested with the project’s actual compiler configuration.

Override Abstract Methods in TypeScript

An abstract class can declare a method without implementing it. A concrete subclass must provide a compatible implementation before it can be instantiated.

</>
Copy
abstract class Report {
    abstract generate(): string;
}

class SalesReport extends Report {
    override generate(): string {
        return "Sales report generated";
    }
}

const report = new SalesReport();
console.log(report.generate());

The abstract declaration defines the contract, while SalesReport supplies the behavior. The override modifier documents that relationship explicitly.

Method Overriding vs Method Overloading in TypeScript

FeatureMethod overridingMethod overloading
Classes involvedParent and child classesUsually one class or function
PurposeReplace or extend inherited behaviorDescribe multiple supported call signatures
ImplementationThe child class supplies its own method bodySeveral overload signatures share one implementation body
Key syntaxextends, override, and optionally superMultiple signatures followed by one compatible implementation

Overriding selects behavior according to the object’s runtime class. TypeScript overloading, by contrast, describes the permitted ways to call a method or function; it does not create multiple JavaScript implementations.

TypeScript Method Overriding Restrictions

  • A private method is not available to subclasses and therefore cannot be overridden as an inherited member.
  • A static method belongs to the class constructor. A static child method can hide or replace access to an inherited static member, but it is separate from instance-method dispatch.
  • The overriding declaration cannot reduce accessibility, such as changing a public parent method to protected.
  • The child method’s parameters and return type must remain compatible with the parent method.
  • The super keyword accesses the immediate parent implementation, not every ancestor implementation automatically.
  • TypeScript checks types at compile time, but JavaScript performs the runtime method lookup.

TypeScript Method Overriding QA Checklist

  • The child class uses extends and overrides an actual inherited member.
  • The overridden method is marked with override, especially when noImplicitOverride is enabled.
  • The child method does not introduce additional required parameters.
  • The child return type remains compatible with the parent return type.
  • Any required parent behavior is preserved through an intentional super.method() call.
  • Tests cover calls through both the child type and a parent-typed reference.
  • Private, static, property, and accessor members are not being confused with ordinary instance-method overriding.

Frequently Asked Questions About TypeScript Method Overriding

Is the override keyword required in TypeScript?

The keyword is optional by default. It becomes required for overridden members when the noImplicitOverride compiler option is enabled. Using it even when it is optional helps detect accidental mismatches during refactoring.

Can a TypeScript method be overridden with different parameters?

The parameters may differ only when the resulting method remains compatible with the parent contract. A child method cannot add a required parameter that parent-method callers are not expected to provide. Optional parameters or appropriately broader accepted types may be compatible.

How do I call the parent version of an overridden method?

Call it with super.methodName(arguments) inside an instance method of the child class. This runs the immediate parent implementation before or after the child-specific logic, depending on where the call is placed.

Can properties be overridden in TypeScript?

Yes. Inherited properties and accessors can be redeclared with override when their types and access rules are compatible with the parent declaration. Field initialization behavior should also be considered when selecting the compilation target.

What is the difference between override and super?

override marks a child member as an intentional replacement for an inherited member. super accesses the parent class, allowing the child constructor or method to invoke the parent implementation.

TypeScript Method Overriding Summary

Method overriding allows a TypeScript subclass to provide specialized behavior for an inherited method. Keep the child signature compatible with the parent declaration, use override to make the relationship explicit, and call super when the parent behavior must be retained. In this TypeScript Tutorial, we have learnt to override the behavior of parent classes using Method Overriding with the help of Example TypeScript program.