React & TypeScript HOCs - 为什么我得到 Type '{}' 不能分配给 Type P？

Question

我在使用 TypeScript 书学习 React 进行编码时碰壁了。我投降了，直接从书上复制粘贴的代码，但是编译器还是不爽

我目前的解决方法是提供“任何”值，而不是 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;

工作代码（我只将 IProps 更改为 any）：

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;

在不工作的代码中，我得到 Type '{}' 不可分配给 Type P 错误。我想解决这个问题，因为它可以帮助我了解正在发生的事情。我是 TypeScript 的初学者！

Answer 1

从 3.2 开始，泛型扩展运算符的行为发生了变化。显然，类型props被擦除是一种负面影响，但是您可以P通过{...props as P}在传播回包装组件时将其转换回using 来解决这个问题。