ESLint

Question

我已经在定义组件名称时看到了类似问题的一些答案，但我想更多地了解 ESLint 背后的逻辑，在我的情况下将组件导出为默认值。

({ children }: AppProviderProps) => - 根据 ESLint：“在 function.eslint@typescript-eslint/explicit-module-boundary-types 上缺少 return 类型” .有人可以向我解释为什么我一直认为这是编写 React 组件的标准方式吗？在这种情况下，解决方案是什么？

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 我知道我可以禁用该规则，但想知道如何编写 ESLint 才不会对我尖叫。

Answer 1

规则 typescript-eslint/explicit-module-boundary-types 告诉您您的函数需要 explicit return 类型。来自消息来源：

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

因此您需要添加适当的 return 类型，在您的示例中就是 <Provider /> 的任何类型：

将 TypeOfProviderHere 替换为正确的类型。

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

ESLint - 在函数反应组件上缺少 return 类型 - 打字稿错误解释

ESLint - missing return type on function react component - Typescript error explanation

typescript

reactjs