Typescript | Warning about Missing Return Type of function, ESLint

Question

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.

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.

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;

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