Override Field

The override modifier in TypeScript is a class member declaration keyword used in a derived class to explicitly state that a method or property (whether instance or static) replaces a corresponding member in its base class. It acts as a compiler-enforced structural safeguard during inheritance, ensuring that the derived member accurately maps to an existing base member.

Syntax

The override keyword is placed directly before the method or property name. If access modifiers (public, protected), the static modifier, or the readonly modifier are used, override must be positioned after the access modifier and static keyword, but before readonly or the member name.

class Base {
    methodName(): void {}
    protected readonly propertyName: string = "base_value";
    public static staticMethodName(): void {}
}

class Derived extends Base {
    override methodName(): void { /* ... */ }
    protected override readonly propertyName: string = "derived_value";
    public static override staticMethodName(): void { /* ... */ }
}

Compiler Mechanics

When the override modifier is applied, the TypeScript compiler performs a strict lookup in the base class declaration.

1. Signature Validation: The compiler asserts that a member with the exact identifier exists in the base class and that the derived member’s type signature is assignable to the base member’s type signature.
2. Absence Rejection: If the base class does not contain a member with the specified name (due to a typo, renaming, or removal), the compiler throws a ts(4113) error: “This member cannot have an ‘override’ modifier because it is not declared in the base class.”

The noImplicitOverride Flag

The utility of the override keyword is governed by the noImplicitOverride compiler option in tsconfig.json.

When noImplicitOverride is set to true:

• The compiler mandates the use of the override keyword for derived class members that override concrete base class members.
• The compiler explicitly does not require the override keyword when implementing abstract methods or properties from a base class, as the compiler already enforces their implementation.
• Omitting the keyword on an overriding concrete member results in a ts(4114) error: “This member must have an ‘override’ modifier because it overrides a member in the base class.”

Code Visualization

class BaseConfig {
    initialize(): void {}
    config: string = "default";
    static factory(): BaseConfig { 
        return new BaseConfig(); 
    }
}

class DerivedConfig extends BaseConfig {
    // Valid: Correctly overrides base instance method
    override initialize(): void {}

    // Valid: Correctly overrides base static method
    static override factory(): DerivedConfig { 
        return new DerivedConfig(); 
    }

    // COMPILER ERROR ts(4113): 'setup' does not exist in BaseConfig
    override setup(): void {}

    // COMPILER ERROR ts(4114) (if noImplicitOverride is true): 
    // Missing 'override' keyword for an existing base member
    config: string = "custom"; 
}

abstract class AbstractValidator {
    abstract validate(): boolean;
}

class ConcreteValidator extends AbstractValidator {
    // Valid: 'override' is optional for abstract members even with noImplicitOverride
    validate(): boolean { 
        return true; 
    }
}

Restrictions

• Private Members: Derived classes cannot override private base members. Consequently, the override modifier cannot be paired with the private access modifier, nor can it be used to narrow the visibility of a public or protected base member to private.
• Constructors: The override modifier cannot be applied to constructor functions.
• Compilation: The override keyword is strictly a TypeScript design-time construct and is completely erased during transpilation to JavaScript.

Master TypeScript with Deep Grasping Methodology!

Learn More