Skip to main content

type-annotation-spacing

Require consistent spacing around type annotations.

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;

Attributes

  • Included in configs
    • ✅ Recommended
    • 🔒 Strict
  • Fixable
    • 🔧 Automated Fixer
    • 💡 Suggestion Fixer
  • 💭 Requires type information

Rule Details​

This rule aims to enforce specific spacing patterns around type annotations and function types in type literals.

Options​

This rule has an object option:

  • "before": false, (default for colon) disallows spaces before the colon/arrow.
  • "before": true, (default for arrow) requires a space before the colon/arrow.
  • "after": true, (default) requires a space after the colon/arrow.
  • "after": false, disallows spaces after the colon/arrow.
  • "overrides", overrides the default options for type annotations with colon (e.g. const foo: string) and function types with arrow (e.g. type Foo = () => {}). Additionally allows granular overrides for variable (const foo: string),parameter (function foo(bar: string) {...}),property (interface Foo { bar: string }) and returnType (function foo(): string {...}) annotations.

defaults​

Examples of code for this rule with no options at all:

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 = ()=> {};

after​

Examples of code for this rule with { "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 = () => {};

before​

Examples of code for this rule with { "before": true, "after": true } options:

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 = ()=> {};

overrides - colon​

Examples of code for this rule with { "before": false, "after": false, overrides: { colon: { before: true, after: true }} } options:

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 = () => {};

overrides - arrow​

Examples of code for this rule with { "before": false, "after": false, overrides: { arrow: { before: true, after: true }} } options:

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 = ()=> {};

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​