ESLint - function 反应组件上缺少返回类型 - Typescript 错误解释

Question

I already saw some of the answers for a similar question when the name of the component is defined, but I would like to understand more the logic behind ESLint with components exported as defaults as in my case.

({ children }: AppProviderProps) => - according to ESLint: "Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types". Could someone explain to me why as I always thought it's a standard way to write React components? And what would be the solution in that case?

import React, { ReactNode } from 'react';
import { Provider } from 'react-redux';
import store from '../../@state/createStore';


export default ({ children }: AppProviderProps) => (
  <Provider store={store}>
    **my code**
  </Provider>
);

interface AppProviderProps {
  children: ReactNode;
}

PS I know I can disable the rule, but would like to know how to write so ESLint wouldnt scream at me.

Answer 1

The rule typescript-eslint/explicit-module-boundary-types is telling you that your function requires and explicit return type. From the source:

Explicit types for function return values and arguments makes it clear to any calling code what is the module boundary's input and output.

So you need to add the appropriate return type, which in your example is whatever the type of <Provider /> is:

Replace TypeOfProviderHere with the correct type.

export default ({ children }: AppProviderProps): TypeOfProviderHere => (
  <Provider store={store}>
    **my code**
  </Provider>
);