Question

我在Typescript项目中是有状态的React组件。我使用@typescript-eslint/parser和@typescript-eslint/eslint-plugin用ESLint对其进行了整理。我已启用规则@typescript-eslint/explicit-function-return-type。

我的组件看起来与此类似：

interface Props = {
  name: string;
}

interface State = {
  score: number
}

class Person extends Component<Props, State> {
  state = {
    score: 2,
  };

  componentDidMount() {
    ...
  }

  render() {
    ...
  }
}

在上述组件中，我在componentDidMount和render方法上收到ESLint错误：

Missing return type on function - @typescript-eslint/explicit-function-return-type

我总体上很喜欢lint规则，但是可以肯定的是，我不必为所有这些React方法都声明一个返回类型。我已经安装了@types/react和@types/react-dom，所以这些返回类型是否已经涵盖？

Answer 1

我通过使用.eslintrc.json将规则添加到{ "allowTypedFunctionExpressions": true }中来使它起作用了

.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      { "allowTypedFunctionExpressions": true }
    ]
  }
}

版本

"@typescript-eslint/eslint-plugin": "^1.10.2",
"@typescript-eslint/parser": "^1.10.2",
"eslint": "^6.0.0",

Answer 2

尝试将呈现函数的返回类型写为

render(): JSX.Element {
  // render code
}

这对我有用！

Answer 3

在这里我可能是错的，因为我个人没有使用过{ "Details": { "ContactData" :{ "CustomerEndPoint" : { "Address" : "01234567890" } } } }，但听起来似乎每个编写的函数（包括生命周期方法）中都需要@typescript-eslint/explicit-function-return-type。请记住，ESLint和React并不相同。 ESLint只是在您的代码上运行以指出潜在错误。如果您不包含这些return语句，则React库仍然应该能够正常运行

每个React类方法的“函数上缺少返回类型”

3 个答案: