ESLint 限制使用 React.StatelessComponent 和 React.FunctionalComponent

Question

是否有一条规则，我可以禁用

React.StatelessComponent

或

React.FunctionalComponent

只使用

React.FC

例如：

export const ComponentOne: React.StatelessComponent<Props> = (props) => { return <....> };
export const ComponentTwo: React.FunctionalComponent<Props> = (props) => { return <....> };

应由 ESLint 强制写为

export const ComponentOne: React.FC<Props> = (props) => { return <....> };
export const ComponentTwo: React.FC<Props> = (props) => { return <....> };

我认为通过

no-restricted-syntax

规则是可能的，但无法从文档中弄清楚。

Answer 1

好吧终于弄清楚了，可以使用规则来实现这一点

@typescript-eslint/ban-types

"@typescript-eslint/ban-types": ["error",
{
    "types": {
        "React.StatelessComponent": { "message": "Please use React.FC instead.", "fixWith": "React.FC" },
        "React.FunctionalComponent": { "message": "Please use React.FC instead.", "fixWith": "React.FC" },
     }
   }
]

Answer 2

如何禁止

React.FC

（为什么？https://github.com/facebook/create-react-app/pull/8177）：

"@typescript-eslint/no-restricted-types": [
  "error",
  {
    types: {
      "React.FC": {
        message: "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
      },
      "React.FunctionComponent": {
        message: "Useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
      },
      "React.FunctionalComponent": {
        message:
          "Preact specific, useless and has some drawbacks, see https://github.com/facebook/create-react-app/pull/8177",
      },
    },
  },
],

• React.StatelessComponent

  和

  React.SFC

  已从

  @types/react

  >= 18
  中删除

• React.VoidFunctionComponent

  和

  React.VFC

  已弃用，最终将被删除（因此无需通过 ESLint 禁止它们）

• React.FunctionalComponent

  特定于 Preact

• 无限制类型的 Eslint 文档