javascript - "Missing return type on function" for every React class method - Stack Overflow

admin管理员组

文章数量:1200385

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?

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?

• javascript
• reactjs
• typescript

Share Improve this question Follow asked Jun 21, 2019 at 17:54 CaribouCodeCaribouCode 14.4k3333 gold badges111111 silver badges183183 bronze badges 7

• Have you checked the settings for an option to allow inherited types? – Avin Kavish Commented Jun 21, 2019 at 18:07
• @AvinKavish I haven't checked that but will now. My ESLint extends are: "plugin:react/recommended", "plugin:@typescript-eslint/recommended" so would have though this would be default?! – CaribouCode Commented Jun 21, 2019 at 18:15
• Oh I meant within the plugin you installed, never mind I just checked, it had no such option. You might want to consider opening an issue on GitHub and asking the authors directly. – Avin Kavish Commented Jun 21, 2019 at 18:22
• @AvinKavish Okay, thanks for your help – CaribouCode Commented Jun 21, 2019 at 18:28
• This might help partially, github.com/typescript-eslint/typescript-eslint/issues/493 – Avin Kavish Commented Jun 21, 2019 at 18:34

 |  Show 2 more comments

3 Answers 3

Sorted by: Reset to default 13

Try writing the return type for render function as

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

This works for me!

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",

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

本文标签： javascriptquotMissing return type on functionquot for every React class methodStack Overflow