CODEWITHSUNDEEP
javascriptreactjstypescript
CaribouCode
CaribouCode

Reputation: 14398

"Missing return type on function" for every React class method

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?

Upvotes: 17

Views: 15444

Answers (3)

Asaf Aviv
Asaf Aviv

Reputation: 11760

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

Upvotes: 4

Gaurav Kalita
Gaurav Kalita

Reputation: 246

Try writing the return type for render function as

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

This works for me!

Upvotes: 13

adr5240
adr5240

Reputation: 454

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

Upvotes: 0

Related Questions