type-annotation-spacing

非推奨

フォーマットに関するルールは、現在eslint-stylisticに移行しています。@stylistic/ts/type-annotation-spacingがこのルールの代替となります。
詳細については、フォーマットルールの非推奨化を参照してください。

型アノテーションの周囲の一貫したスペースを要求します。

🔧

このルールによって報告される問題の一部は、 --fix ESLintコマンドラインオプション.

によって自動的に修正可能です。

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

型アノテーションの周囲のスペースは、コードの可読性を向上させます。TypeScriptの型アノテーションで最も一般的に使用されるスタイルガイドラインでは、コロンの後にスペースを追加しますが、その前にはスペースを追加しないことが規定されていますが、これはプロジェクトの好みによって異なります。例:

module.exports = {
  "rules": {
    "@typescript-eslint/type-annotation-spacing": "error"
  }
};

.eslintrc.cjs

プレイグラウンドでこのルールを試す ↗

例

このルールは、型アノテーションと型リテラルの関数型の周囲の特定のスペーシングパターンを強制することを目的としています。

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

✅ 正しい

❌ 不正

let foo: string = "bar";

function foo(): string {}

class Foo {
    name: string;
}

type Foo = () => {};

✅ 正しい

プレイグラウンドで開く

オプション

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 = [{}];

このルールは以下のオプションを受け入れます。

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

✅ 正しい

❌ 不正

let foo: string = "bar";

function foo(): string {}

class Foo {
    name: string;
}

type Foo = ()=> {};

✅ 正しい

after

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

✅ 正しい

❌ 不正

let foo : string = "bar";

function foo() : string {}

class Foo {
    name : string;
}

type Foo = () => {};

✅ 正しい

before

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

✅ 正しい

❌ 不正

let foo : string = "bar";

function foo() : string {}

class Foo {
    name : string;
}

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

type Foo = ()=>{};

✅ 正しい

overrides - コロン

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

✅ 正しい

❌ 不正

let foo:string = "bar";

function foo():string {}

class Foo {
    name:string;
}

type Foo = () => {};

✅ 正しい

overrides - 矢印

使用しない場合

型アノテーションのスペースを強制したくない場合は、このルールをオフにしても安全です。

• 参考資料
• TypeScript型システム

型推論

• リソース
• ルールソース