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 = () => {};使用しない場合
型アノテーションにスペースを適用しない場合は、このルールを無効にしても問題ありません。