Repository files navigation

Finally brings support for theoverride keyword to TypeScript!

exportclassBasic{publicoverridePlease():void{}publicdoNotOverride():void{}}exportclassChildextendsBasic{publicdoNotOverride():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 */publicoverridePlease():void{}// Alternatively, you can use the decorator syntax    @overridepublicoverridePlease():void{}// Typos won't bother you anymore/**@override */publicoveridePlease():void{}// ERROR: Method with@override tag is not overriding anything}

Most modern object oriented languages provide anoverride keyword to prevent misuse of the override mechanism. However, support for theoverride keyword in TypeScriptis 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.
• ...

npm install --save-dev tslint-override

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

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

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

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

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

In your application entry point, include the following import.

import'tslint-override/register';

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

classFooextendsBasic{    @overridepublicdoStuff(){}}

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

functionoverride(_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.

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

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

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

Linting will accept both@override and@Override jsdoc tags or decorators, but the fixer defaults to adding@override. This can be changed with thepascal-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.

If you want the fixer to put a new line after the tag use thenew-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" ]    }}

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:

classFooextendsBasic{    @Override()publicdoStuff(){}}

Add the settingangular-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" ]    }}

This rulerequires type information. If you are still usingvscode-tslint you should switch over to using thetslint-language-service becausevscode-tslint won't show the errors reported bytslint-override.

Example in VSCode:

Created and maintained by@hmil.
Contributions:

• @Yuudaari - Addedpascal-case-fixer option.
• @stasberkov - Addedexclude-interfaces option.
• @mzyil - Addednew-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.