键入“{}”不能指定键入“IntrinsicAttributes”

Question

我是TypeScript的新手，我想用它来做反应。我有一个需要像这样导出的功能组件：

import React from 'react';
import HOC from './HOC';

interface PropsType {
  someProp: boolean;
}

const MyFunctionalComponent: React.FC<PropsType> = ({ someProp }) => {
  return(
    ...
  )
};

export default HOC(MyFunctionalComponent);

HOC.tsx是这样的：

import React, { Suspense } from 'react';
import Loader from './Loader';

export default function HOC(HocComponent: React.FC) {
  return function () {
    return (
      <Suspense fallback={<Loader />}>
        <HocComponent />
      </Suspense>
    );
  };
}

问题是，我得到了以下错误，我已经搜索过，但还没有找到明确的解决方案：

Type '{ someProp: true; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'someProp' does not exist on type 'IntrinsicAttributes'.  TS2322

显然，如果我不用MyFunctionalComponent包装HOC，那么它就能正常工作。解决这个问题的正确方法是什么？提前谢谢。

Answer 1

问题是，必须将属性强制转换为抽象参数(如object )。

这应该是可行的：

import React, { Suspense } from 'react';
import Loader from './Loader';

const withLoading<P extends object> (Component: React.ComponentType<P>) => 
    class WithLoading extends React.Component<P> {
        render() {
            return (
                <Suspense fallback={<Loader />}>
                    <HocComponent {...this.props as P} />
                </Suspense>
            );
        }
    }
}

export default HOC;

然后你可以简单地：

import React from 'react';
import withLoading from './HOC';

interface PropsType {
    someProp: boolean;
}

const MyFunctionalComponent: React.FC<PropsType> = ({ someProp }) => {
    return(
        ...
    );
};

export default withLoading(MyFunctionalComponent);

这是来源：https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb