跳至主要內容

parameter-properties

在類別建構式中需要或禁止參數屬性。

TypeScript 加入「參數屬性」的簡寫來同時在一個位置宣告類別建構式參數和類別屬性。對 TypeScript 新手來說，參數屬性可能會令人感到困惑，因為它不如其他宣告和初始化類別成員的方式來得明確。

這個規則可以設定為永遠禁止使用參數屬性，或是在可能的情況下強制使用。

.eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/parameter-properties": "error"
  }
};

在測試區嘗試這個規則 ↗

選項​

此規則接受下列選項

type Modifier =
  | 'private readonly'
  | 'private'
  | 'protected readonly'
  | 'protected'
  | 'public readonly'
  | 'public'
  | 'readonly';

type Options = [
  {
    allow?: Modifier[];
    prefer?: 'class-property' | 'parameter-property';
  },
];

const defaultOptions: Options = [{ allow: [], prefer: 'class-property' }];

此規則在預設狀態下，不需任何參數，並完全禁止使用參數屬性。它可以接受一個包含下列一或兩個或全部項目的選項物件

  • "allow"：允許忽略某些類型的屬性
  • "prefer"："class-property" (預設) 或 "parameter-property"

allow​

如果您想忽略特定類型的屬性，那麼您可以傳遞一個物件，其中包含 "allow" 作為任何下列選項的陣列

  • allow，一個陣列，其中包含一個或多個允許的修飾詞。有效的值是
    • readonly，允許**readonly**參數屬性。
    • private，允許**private**參數屬性。
    • protected，允許**protected**參數屬性。
    • public，允許**public**參數屬性。
    • private readonly，允許**private readonly**參數屬性。
    • protected readonly，允許**protected readonly**參數屬性。
    • public readonly，允許**public readonly**參數屬性。

例如，要忽略public屬性

{
  "@typescript-eslint/parameter-properties": [
    true,
    {
      "allow": ["public"]
    }
  ]
}

prefer​

預設情況下，規則偏好類別屬性 ("class-property")。您可以改為使用 ("parameter-property") 來偏好參數屬性。

在 "parameter-property" 模式中，規則將在以下情況下發出報告

  • 類別屬性和建構函式參數具有相同的名稱和類型
  • 建構函式參數在建構函式開頭指派至類別屬性

default​

此規則的程式碼範例完全沒有任何選項

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

readonly​

{ "allow": ["readonly"] } 選項的程式碼範例

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

private​

{ "allow": ["private"] } 選項的程式碼範例

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

protected​

{ "allow": ["protected"] } 選項的程式碼範例

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

public​

{ "allow": ["public"] } 選項的程式碼範例

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

private readonly​

{ "allow": ["private readonly"] } 選項的程式碼範例

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

protected readonly​

{ "allow": ["protected readonly"] } 選項的程式碼範例

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(public readonly name: string) {}
}
在遊樂場中開啟

public readonly​

{ "allow": ["public readonly"] } 選項的程式碼範例

class Foo {
  constructor(readonly name: string) {}
}

class Foo {
  constructor(private name: string) {}
}

class Foo {
  constructor(protected name: string) {}
}

class Foo {
  constructor(public name: string) {}
}

class Foo {
  constructor(private readonly name: string) {}
}

class Foo {
  constructor(protected readonly name: string) {}
}
在遊樂場中開啟

"parameter-property"​

{ "prefer": "parameter-property" } 選項的程式碼範例

class Foo {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Foo {
  public readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Foo {
  constructor(name: string) {
    this.name = name;
  }
  name: string;
}
在遊樂場中開啟

何時不使用​

若您不在乎班級中建構函式的哪些參數屬性樣式被採用時，則不需要這條規則。

但是請記住，不一致的樣式會損害專案的可讀性。建議您選擇這條規則中，最適合您專案的單一選項。

資源​