@stylistic/ts/

type-annotation-spacing

类型注解周围的间距可以提高代码的可读性。虽然 TypeScript 中最常用的类型注解风格指南规定在冒号后添加空格，但在冒号前不添加空格，但这取决于项目的偏好。例如

// 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;

示例

此规则旨在强制执行类型注解和类型字面量中函数类型周围的特定间距模式。

/*eslint @stylistic/ts/type-annotation-spacing: "error"*/

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

/*eslint @stylistic/ts/type-annotation-spacing: "error"*/

let foo: string = "bar";

function foo(): string {}

class Foo {
    name: string;
}

type Foo = () => {};

选项

之后

使用 { "before": false, "after": true } 选项时，此规则的错误代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "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": false, "after": true } 选项时，此规则的正确代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "before": false, "after": true }]*/

let foo: string = "bar";

function foo(): string {}

class Foo {
    name: string;
}

type Foo = ()=> {};

之前

使用 { "before": true, "after": true } 选项时，此规则的错误代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "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 = ()=> {};

使用 { "before": true, "after": true } 选项时，此规则的正确代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "before": true, "after": true }]*/

let foo : string = "bar";

function foo() : string {}

class Foo {
    name : string;
}

type Foo = () => {};

覆盖 - 冒号

使用 { "before": false, "after": false, "overrides": { "colon": { "before": true, "after": true } } } 选项时，此规则的错误代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "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 = () => {};

使用 { "before": false, "after": false, "overrides": { "colon": { "before": true, "after": true } } } 选项时，此规则的正确代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "before": false, "after": false, "overrides": { "colon": { "before": true, "after": true } } }]*/

let foo : string = "bar";

function foo() : string {}

class Foo {
    name : string;
}

type Foo = {
    name: (name : string)=>string;
}

type Foo = ()=>{};

覆盖 - 箭头

使用 { "before": false, "after": false, "overrides": { "arrow": { "before": true, "after": true } } } 选项时，此规则的错误代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "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 = ()=> {};

使用 { "before": false, "after": false, "overrides": { "arrow": { "before": true, "after": true } } } 选项时，此规则的正确代码示例

/*eslint @stylistic/ts/type-annotation-spacing: ["error", { "before": false, "after": false, "overrides": { "arrow": { "before": true, "after": true } } }]*/

let foo:string = "bar";

function foo():string {}

class Foo {
    name:string;
}

type Foo = () => {};

何时不使用它

如果您不想为类型注释强制执行空格，可以安全地关闭此规则。

进一步阅读

• TypeScript 类型系统
• 类型推断

正确

错误

正确

错误

正确

错误

正确

错误

正确

错误