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

Question

I a stateful React component in my Typescript project. I lint it with ESLint using @typescript-eslint/parser and @typescript-eslint/eslint-plugin . I've enabled the rule @typescript-eslint/explicit-function-return-type .

My component looks similar to this:

interface Props = {
  name: string;
}

interface State = {
  score: number
}

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

  componentDidMount() {
    ...
  }

  render() {
    ...
  }
}

In the above component I get the ESLint error on the componentDidMount and render methods:

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

I quite like the lint rule in general, but surely I don't have to declare a return type for all these React methods. I have @types/react and @types/react-dom installed, so aren't these return types covered already?

Answer 1

Try writing the return type for render function as

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

This works for me!

Answer 2

I just got it working by adding the rule into .eslintrc.json with

{ "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 }
    ]
  }
}

versions

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

Answer 3

I could be wrong here as I have not personally used @typescript-eslint/explicit-function-return-type but it's name sounds as if you need a return in every single function written, including the lifecycle methods. Remember that the ESLint and React are not the same. ESLint is simply running over your code to point out potential errors. The React library should still be able to run without issue if you do not include these return statements