Typescript | Warning about Missing Return Type of function, ESLint

Question

I have a REACT-STATELESS-COMPONENT, in a project with TypeScript. It has an error, saying, that

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

I am not sure what it wants me to do. Here is my code:

import React, { Fragment} from 'react';
import IProp from 'dto/IProp';

export interface Props {
  prop?: IProp;
}

const Component = <T extends object>({ prop }: Props & T) => (
  <Fragment>
    {prop? (
      <Fragment>
        Some Component content..
      </Fragment>
    ) : null}
  </Fragment>
);

LicenseInfo.defaultProps: {};

export default Component;

Can you tell me what I need to do. I need to read about TS, but currently I don't get it at all. And I can't commit right now cause of this.

Solution 1

I'd recommend using the types provided by react; they'll include the return type. If you're on the version 16.8.0 or later of react, do this:

const Component: React.FunctionComponent<Props> = (props) => (

Or use the shorthand:

const Component: React.FC<Props> = (props) => (

Prior to 16.8, you'd instead do:

const Component: React.SFC<Props> = (props) => (

Where SFC stands for "stateless functional component". They changed the name, since function components are no longer necessarily stateless.

Solution 2

For a function return type it goes after the arguments:

({ prop }: Props & T): JSX.Element => {}

JSX.Element is what TypeScript will infer, it's a pretty safe bet.

If you're curious, you should be able to see what TypeScript infers as the return type by hovering over Component, this will show the entire signature.

Solution 3

This is how I usually declare a component using typescript:

import * as React from 'react';

type MyComponentProps = {
  myStringProp: String,
  myOtherStringProp: String
};

const MyComponent: React.FunctionComponent<MyComponentProps> = ({ myStringProp, myOtherStringProp }): JSX.Element => {
  return (
    <div>
      <h1>This is My Component</h1>
    </div>
  );
};


export default MyComponent;

Solution 4

If you use @types/react you don't have to provide return types for React components. You can disable this rule for react components like this. Just add this to your .eslintrc.js:

  overrides: [
    {
      files: ['*.jsx', '*.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': ['off'],
      },
    },
  ],

Solution 5

This rule aims to ensure that the values returned from functions are of the expected type.

The following patterns are considered warnings:

Problem :

// Should indicate that no value is returned (void)
function test() {
   return;
}

 // Should indicate that a number is returned
 var fn = function () {
   return 1;
 };

 // Should indicate that a string is returned
 var arrowFn = () => 'test';

 class Test {
   // Should indicate that no value is returned (void)
   method() {
     return;
  }
}

solution :

// No return value should be expected (void)
function test(): void {
  return;
}

// A return value of type number
 var fn = function (): number {
  return 1;
};

// A return value of type string
var arrowFn = (): string => 'test';

class Test {
  // No return value should be expected (void)
  method(): void {
    return;
  }
}

Link : https://github.com/typescript-eslint/typescript-eslint/blob/v4.22.0/packages/eslint-plugin/docs/rules/explicit-function-return-type.md

View more solutions

Comments

[Admin]

Thank you. This actually fixed my second component with defaultProps. A question just to clarify things. Why in the second component, where I had defaultProps the answer from below didn't work?? I mean what is different when you have defaultProps?

[Robbie Milejczak]

the only clear difference would be their respective type definitions, I'm guessing React.SFC doesn't include defaultProps in it's definition while JSX.Element does. What was the error message?

[user2079828]

This does not work for me: const HeaderNotification: React.FunctionComponent<Props> = (props: Props) => { I still recieve an error on the lambda function, since it's doesn't have an explicit return type. Any way to fix that? EDIT: Only that that worked was: const HeaderNotification: React.FunctionComponent<Props> = (props: Props): JSX.Element => {

[Ken Bigler]

@KenGregory React.ReactElement worked for me, thanks for the recommendation!

[dmudro]

no need to explicitly type props argument as it's already typed in the <Props> generic so this will be just fine: const Component: React.FunctionComponent<Props> = (props) => ( Even better is to destructure the prop object: const Component: React.FunctionComponent<Props> = ({ prop }) => (

[AntonAL]

Maybe, your comment can be outdated, because there is a fresh discussion on this topic Remove React.FC from Typescript template. They recommend to replace React.FC to JSX.Element.

[martisj]

Typescript should be able to infer the return type for React components. It shouldn't be necessary.

[Paul Razvan Berg]

How does JSX get picked up by TypeScript even if it's not imported?

[Robbie Milejczak]

it is part of typescripts global namespace