type-annotation-spacing
Formatting rules now live in eslint-stylistic. @stylistic/ts/type-annotation-spacing is the replacement for this rule.
See Deprecating Formatting Rules for more information.
Require consistent spacing around type annotations.
Some problems reported by this rule are automatically fixable by the --fix
ESLint command line option.
Spacing around type annotations improves readability of the code. Although the most commonly used style guideline for type annotations in TypeScript prescribes adding a space after the colon, but not before it, it is subjective to the preferences of a project. For example:
// with space after, but not before (default if no option is specified)
let foo: string = "bar";
// with no spaces
let foo:string = "bar";
// with space before and after
let foo : string = "bar";
// with space before, but not after
let foo :string = "bar";
// with spaces before and after the fat arrow (default if no option is specified)
type Foo = (string: name) => string;
// with no spaces between the fat arrow
type Foo = (string: name)=>string;
// with space after, but not before the fat arrow
type Foo = (string: name)=> string;
// with space before, but not after the fat arrow
type Foo = (string: name) =>string;
module.exports = {
"rules": {
"@typescript-eslint/type-annotation-spacing": "error"
}
};
Try this rule in the playground ↗
Examples
This rule aims to enforce specific spacing patterns around type annotations and function types in type literals.
- ❌ Incorrect
- ✅ Correct
let foo:string = "bar";
let foo :string = "bar";
let foo : string = "bar";
function foo():string {}
function foo() :string {}
function foo() : string {}
class Foo {
name:string;
}
class Foo {
name :string;
}
class Foo {
name : string;
}
type Foo = ()=>{};
type Foo = () =>{};
type Foo = ()=> {};
Open in Playgroundlet foo: string = "bar";
function foo(): string {}
class Foo {
name: string;
}
type Foo = () => {};
Open in PlaygroundOptions
This rule accepts the following options:
type SpacingConfig = {
after?: boolean;
before?: boolean;
};
type Options = [
{
after?: boolean;
before?: boolean;
overrides?: {
arrow?: SpacingConfig;
colon?: SpacingConfig;
parameter?: SpacingConfig;
property?: SpacingConfig;
returnType?: SpacingConfig;
variable?: SpacingConfig;
};
},
];
const defaultOptions: Options = [{}];
after
{ "before": false, "after": true }
- ❌ Incorrect
- ✅ Correct
let foo:string = "bar";
let foo :string = "bar";
let foo : string = "bar";
function foo():string {}
function foo() :string {}
function foo() : string {}
class Foo {
name:string;
}
class Foo {
name :string;
}
class Foo {
name : string;
}
type Foo = ()=>{};
type Foo = () =>{};
type Foo = () => {};
Open in Playgroundlet foo: string = "bar";
function foo(): string {}
class Foo {
name: string;
}
type Foo = ()=> {};
Open in Playgroundbefore
{ "before": true, "after": true }
- ❌ Incorrect
- ✅ Correct
let foo: string = "bar";
let foo:string = "bar";
let foo :string = "bar";
function foo(): string {}
function foo():string {}
function foo() :string {}
class Foo {
name: string;
}
class Foo {
name:string;
}
class Foo {
name :string;
}
type Foo = ()=>{};
type Foo = () =>{};
type Foo = ()=> {};
Open in Playgroundlet foo : string = "bar";
function foo() : string {}
class Foo {
name : string;
}
type Foo = () => {};
Open in Playgroundoverrides - colon
{
"before": false,
"after": false,
"overrides": { "colon": { "before": true, "after": true } }
}
- ❌ Incorrect
- ✅ Correct
let foo: string = "bar";
let foo:string = "bar";
let foo :string = "bar";
function foo(): string {}
function foo():string {}
function foo() :string {}
class Foo {
name: string;
}
class Foo {
name:string;
}
class Foo {
name :string;
}
type Foo = () =>{};
type Foo = ()=> {};
type Foo = () => {};
Open in Playgroundlet foo : string = "bar";
function foo() : string {}
class Foo {
name : string;
}
type Foo = {
name : (name : string)=>string;
}
type Foo = ()=>{};
Open in Playgroundoverrides - arrow
{
"before": false,
"after": false,
"overrides": { "arrow": { "before": true, "after": true } }
}
- ❌ Incorrect
- ✅ Correct
let foo: string = "bar";
let foo : string = "bar";
let foo :string = "bar";
function foo(): string {}
function foo():string {}
function foo() :string {}
class Foo {
name: string;
}
class Foo {
name : string;
}
class Foo {
name :string;
}
type Foo = ()=>{};
type Foo = () =>{};
type Foo = ()=> {};
Open in Playgroundlet foo:string = "bar";
function foo():string {}
class Foo {
name:string;
}
type Foo = () => {};
Open in PlaygroundWhen Not To Use It
If you don't want to enforce spacing for your type annotations, you can safely turn this rule off.