Finally brings support for the override keyword to TypeScript!
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
}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.
- ...
npm install --save-dev tslint-overrideThen, in your tslint.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 of interface checking. In that case, tslint-override will only look at parent classes.
{
"extends": [
"tslint-override"
],
"rules": {
"explicit-override": [ true, "exclude-interfaces" ]
}
}If you want to use the decorator syntax, you will need the override 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:
class Foo extends Basic {
@override public doStuff() { }
}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.
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.
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.
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" ]
}
}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" ]
}
}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:
Created and maintained by @hmil.
Contributions:
- @Yuudaari - Added
pascal-case-fixeroption. - @stasberkov - Added
exclude-interfacesoption. - @mzyil - Added
new-line-after-decorators-and-tagsoption. - @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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent