Skip to main content

type-annotation-spacing

Deprecated

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;
.eslintrc.cjs
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.

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 Playground

Options

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 }
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 Playground

before

{ "before": true, "after": true }
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 Playground

overrides - colon

{
"before": false,
"after": false,
"overrides": { "colon": { "before": true, "after": true } }
}
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 Playground

overrides - arrow

{
"before": false,
"after": false,
"overrides": { "arrow": { "before": true, "after": true } }
}
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 Playground

When Not To Use It

If you don't want to enforce spacing for your type annotations, you can safely turn this rule off.

Further Reading

Resources