Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

React: Missing return type on function. eslint(@typescript-eslint/explicit-function-return-type)

Ask Question just disable this rule in lint config. "explicit type retur". and i would recommended you yo use tslint insteed of eslint since you are using typescript – Juraj Kocan Jun 10, 2019 at 9:42 Thanks @JurajKocan, it seems to be that Typescript is moving to eslint. Search for "eslint" in this article: github.com/Microsoft/TypeScript/issues/… That's why I chose eslint over tslint. – SergioP Jun 10, 2019 at 9:50 ...and I don't want to disable the rule, but understand how to avoid breaking it and made my code better and cleaner! ;-) – SergioP Jun 10, 2019 at 9:52 hm interesting, i didnt know about that... if you dont want to disable this rule you will be force to write return type to all your function. so just write return type. In your image there is only type for constant, but not return type of the function. And not all eslint rules are good for you. people can have other opinions. i would disable this rule. Infer type are ts feature that make easier your life. you have still strict type. – Juraj Kocan Jun 10, 2019 at 10:21 type Props = { title: string }; const Test: React.FunctionComponent<Props> = ({ title }): React.ReactElement<Props> => (<div>{title}</div>); – Juraj Kocan Jun 10, 2019 at 10:25

As explained by Nicholas Tower in this answer Typescript | Warning about Missing Return Type of function, ESLint , depending on the react version that you are using, you can use any of the lines below:

If you're on the latest react version (16.8.0 or later), do this: const Component: React.FunctionComponent<Props> = (props: Props) => { }

Prior to 16.8, you'd instead do: const Component: React.SFC<Props> = (props: Props) => {}

Where SFC stands for "stateless functional component".

EDIT:------

Based on @SergioP's comment, a more idiomatic solution would be

const Test = ({ title }: Props): JSX.Element => <div>{title}</div>

I'm on React 16.8.5, it's a fresh new project. The syntax I used is supposed to be correct, why eslint is complaining? Could it be a wrong eslint configuration? – SergioP Jun 9, 2019 at 23:30 With this syntax the linter doesn't complain: const Test = ({ title }: Props): JSX.Element => <div>{title}</div> – SergioP Jun 9, 2019 at 23:46

The above code given same issue to me, then code is updated like below, then error disappear in my case

const handleLogout = (): void => {
router.push('/')
Reference Link:
https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/explicit-function-return-type.md
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.