Reactjs React&TypeScript HOCs-为什么我得到的类型“{}”不能分配给类型P？

我一边写代码一边学习打字本。我放弃并直接从书中复制粘贴的代码，但编译器仍然不高兴

我目前的解决方法是提供“任意”值，而不是IProps，但这是一种廉价的黑客行为

非工作代码：

import * as React from 'react';

interface IProps {
  loading: boolean;
}

const withLoader = <P extends object>(
  Component: React.ComponentType<P>
): React.FunctionComponent<P & IProps> => ({ loading, ...props }: 
IProps) =>
  loading ? (
    <div className="loader-overlay">
      <div className="loader-circle-wrap">
        <div className="loader-circle" />
      </div>
    </div>
  ) : (
    <Component {...props} />
  );

 export default withLoader;

工作代码I仅将IProps更改为任何：

import * as React from 'react';

interface IProps {
  loading: boolean;
}

const withLoader = <P extends object>(
  Component: React.ComponentType<P>
): React.FunctionComponent<P & IProps> => ({ loading, ...props }: 
any) =>
  loading ? (
    <div className="loader-overlay">
      <div className="loader-circle-wrap">
        <div className="loader-circle" />
      </div>
    </div>
  ) : (
    <Component {...props} />
  );

 export default withLoader;

在非工作代码中，我得到类型“{}”不可分配给类型p error。我想解决这个问题，因为它将帮助我了解正在发生的事情。我是打字的初学者

从3.2开始。显然，这种类型的道具会作为一种负面的副作用而被擦除，但是你可以通过使用{…props as P}将其重新投射到P来解决这一问题，当它扩散回包装组件时。

从3.2开始。显然，这种类型的道具会作为一种负面的副作用而被擦除，但是你可以通过使用{…props as P}将其重新投射到P来解决这个问题，当它扩散回包装组件时