打字稿 |关于缺少函数返回类型 ESLint 的警告答案

【问题标题】：Typescript | Warning about Missing Return Type of function, ESLint打字稿 |关于缺少函数返回类型 ESLint 的警告
【发布时间】：2019-07-15 19:40:48
【问题描述】：

我有一个REACT-STATELESS-COMPONENT，在一个使用 TypeScript 的项目中。它有一个错误，说，

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

我不确定它要我做什么。这是我的代码：

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;

你能告诉我我需要做什么吗？我需要阅读有关 TS 的信息，但目前我根本不明白。而且我现在不能承诺。

【问题讨论】：

标签： javascript reactjs typescript types eslint

【解决方案1】：

我建议使用 react 提供的类型；他们将包括返回类型。如果您使用的是 16.8.0 或更高版本的 react，请执行以下操作：

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

或者使用简写：

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

在 16.8 之前，您应该这样做：

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

其中 SFC 代表“无状态功能组件”。他们更改了名称，因为函数组件不再一定是无状态的。

【讨论】：

这对我不起作用：const HeaderNotification: React.FunctionComponent<Props> = (props: Props) => { 我仍然收到关于 lambda 函数的错误，因为它没有明确的返回类型。有什么办法可以解决吗？编辑：唯一有效的是：const HeaderNotification: React.FunctionComponent<Props> = (props: Props): JSX.Element => {
不需要显式输入 props 参数，因为它已经在泛型中输入，所以这会很好：const Component: React.FunctionComponent<Props> = (props) => ( 更好的是解构 prop 对象：const Component: React.FunctionComponent<Props> = ({ prop }) => (
也许，你的评论可能已经过时了，因为关于这个话题Remove React.FC from Typescript template有一个新的讨论。他们建议将React.FC 替换为JSX.Element。
Typescript 应该能够推断 React 组件的返回类型。应该没有必要。

【解决方案2】：

对于函数返回类型，它位于参数之后：

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

JSX.Element 是 TypeScript 会推断的，这是一个非常安全的选择。

如果你很好奇，你应该可以通过将鼠标悬停在 Component 上看到 TypeScript 推断出的返回类型，这将显示整个签名。

【讨论】：

谢谢。这实际上用 defaultProps 修复了我的第二个组件。一个问题只是为了澄清事情。为什么在我有 defaultProps 的第二个组件中，下面的答案不起作用？我的意思是当你有 defaultProps 时有什么不同？
唯一明显的区别是它们各自的类型定义，我猜React.SFC 的定义中不包括defaultProps，而JSX.Element 有。错误信息是什么？
@KenGregory React.ReactElement 为我工作，感谢您的推荐！
JSX 即使没有被导入，如何被 TypeScript 拾取？
它是 typescripts 全局命名空间的一部分

【解决方案3】：

这就是我通常使用 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;

【讨论】：

【解决方案4】：

此规则旨在确保从函数返回的值是预期的类型。

以下模式被视为警告：

问题：

// 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;
  }
}

解决方案：

// 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;
  }
}

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

【讨论】：

【解决方案5】：

如果您使用@types/react，则不必为 React 组件提供返回类型。您可以为这样的反应组件禁用此规则。只需将其添加到您的 .eslintrc.js 中：

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

【讨论】：