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 = () => {};オプション
after
{ "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
{ "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 = () => {};overrides - colon
{ "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 = ()=>{};overrides - arrow
{ "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 = () => {};使用しない場合
型注釈のスペースを強制したくない場合は、このルールを安全にオフにできます。