TSLint override rule

Finally brings support for the override keyword to TypeScript!

What

export class Basic {
    public overridePlease(): void { }
    public doNotOverride(): void { }
}

export class Child extends Basic {
    public doNotOverride(): void { } // ERROR: Method Child#doNotOverride is overriding Basic#doNotOverride. Use the @override JSDoc tag if the override is intended

    // Make it explicit that you intend to override this member
    /** @override */ public overridePlease(): void { }

    // Alternatively, you can use the decorator syntax
    @override public overridePlease(): void { }

    // Typos won't bother you anymore
    /** @override */ public overidePlease(): void { } // ERROR: Method with @override tag is not overriding anything
}

Why

Most modern object oriented languages provide an override keyword to prevent misuse of the override mechanism. However, support for the override keyword in TypeScript is nowhere in sight, and in the meantime, TypeScript programmers are left with no ideal solution to this problem.

Here are some reasons to use this rule:

• You may want to override a method, but introduce a typo in the method name and end up creating a new method by accident.
• You accidentally override a method of a base class because the method you just added shares the same name and has a compatible signature.
• A library author introduces a new method to a base class, which gets accidentally overridden by a method you wrote in a subclass in the past.
• ...

How

npm install --save-dev tslint-override

Then, in your tslint.json, extend the tslint-override configuration.

{
    "extends": [
        "tslint-override"
    ]
}

Excluding interfaces

By default, tslint-override checks all members inherited or defined by any object in the heritage chain. You can opt out of interface checking. In that case, tslint-override will only look at parent classes.

{
    "extends": [
        "tslint-override"
    ],
    "rules": {
        "explicit-override": [ true, "exclude-interfaces" ]
    }
}

Using decorators

If you want to use the decorator syntax, you will need the override decorator in your scope. There are two ways to do this:

Let tslint-override do the job

In your application entry point, include the following import.

import 'tslint-override/register';

You can then use @override anywhere else in your code:

class Foo extends Basic {
    @override public doStuff() { }
}

Define it yourself

Alternatively, you can define it yourself, but make sure it is in scope where you need it.

function override(_target: any, _propertyKey: string, _descriptor?: PropertyDescriptor) { /* noop */ }

If your love for java will never die, you can define this with a capital 'O' and use @Override in your code instead.

Enforcing either jsdoc tags or decorators

Both jsdoc tags and decorators are accepted by default. If you want to force one and ignore the other, specify either the decorator or jsdoc parameter like this:

    "rules": {
        "explicit-override": [ true, "decorator" ]
    }

By default, the fixer adds jsdoc tags. Specifying the decorator option will also change that to use decorators.

PascalCase @Override fixer

Linting will accept both @override and @Override jsdoc tags or decorators, but the fixer defaults to adding @override. This can be changed with the pascal-case-fixer option.

{
    "extends": [
        "tslint-override"
    ],
    "rules": {
        "explicit-override": [ true, "pascal-case-fixer" ]
    }
}

Note: tslint-override/register does not support the PascalCase @Override decorator, so you will have to define it yourself.

Enforcing a new line in the fixer

If you want the fixer to put a new line after the tag use the new-line-after-decorators-and-tags option.

{
    "extends": [
        "tslint-override"
    ],
    "rules": {
        "explicit-override": [ true, "new-line-after-decorators-and-tags" ]
    }
}

or

{
    "extends": [
        "tslint-override"
    ],
    "rules": {
        "explicit-override": [ true, "decorator", "new-line-after-decorators-and-tags" ]
    }
}

Angular-friendly syntax (decorator with parenthesis)

tslint-override offers an angular-friendly decorator syntax, where the decorator is called with a pair of parenthesis.

import 'tslint-override/angular-register';

You can then use @Override() or @override() anywhere in your code:

class Foo extends Basic {
    @Override() public doStuff() { }
}

Add the setting angular-syntax-fixer to let tslint know to use parenthesis when fixing code.

{
    "extends": [
        "tslint-override"
    ],
    "rules": {
        "explicit-override": [ true, "decorator", "angular-syntax-fixer", "pascal-case-fixer" ]
    }
}

---

IDE support

This rule requires type information. If you are still using vscode-tslint you should switch over to using the tslint-language-service because vscode-tslint won't show the errors reported by tslint-override.

Example in VSCode:

Contributing, Credits, etc

Created and maintained by @hmil.
Contributions:

• @Yuudaari - Added pascal-case-fixer option.
• @stasberkov - Added exclude-interfaces option.
• @mzyil - Added new-line-after-decorators-and-tags option.
• @wSedlacek - Added angular-friendly decorator and fixer, various bug fixes.

License: MIT

Please star this repo if you like it, and submit code and issues if something doesn't work.