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.

Answer 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.

Answer 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.

Answer 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;

Answer 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'],
      },
    },
  ],

Answer 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