如何在 TypeScript 定义中定义 React FunctionalComponent 的返回类型

Question

运行tsc --strict时出现以下错误：

Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

也许我定义的类型错误，但我找不到任何地方如何正确地做到这一点。 我查看了React.FC类型，我的理解是它是React.FunctionComponent的别名，这使得它继承了ReactElement的返回值。 因此，据我了解，这应该有效，或者至少不是implicit any 。 在我的类型定义和组件下方。

我使用 JSdoc 符号来检查我的 JS 文件与 typescript 定义。 符号是这样的：

/**
 * LoadingIndicator - Just a simple loading spinner..
 *
 * @type LoadingIndicator { import("../../types/index.d.ts").LoadingIndicator }
 */

我在index.d.ts中导出的类型：

export const LoadingIndicator: React.FC<LoadingIndicatorProps>;

我的功能组件：

const LoadingIndicator = ({ size = 15, color = '#006CFF' }) => (
    <div
      className={'loading-indicator ' + color}
      style={{ width: size, height: size }}
    >
    </div>
  );

Answer 1

请用这种方法试试

const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ size = 15, color = '#006CFF' }) => (
  <div
    className={'loading-indicator ' + color}
    style={{ width: size, height: size }}
  >
  </div>
);