Question

我在学习《带TypeScript的书》和编码时碰壁。我投降并直接从书中复制粘贴的代码，但是编译器仍然不满意

我当前的解决方法是提供“任意”值，而不是IProps，但这是一个便宜的技巧。

无效的代码：

password

工作代码（我仅将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;

在无法正常工作的代码中，我无法将类型'{}'分配给类型P错误。我想解决这个问题，因为它可以帮助我了解发生了什么。我是TypeScript的初学者！

Answer 1

从3.2 behaviour of the spread operator for generics has changed开始。显然，props的类型会被消除，这是负面影响，但是您可以通过将其扩散回包装的组件时使用P将其投射回{...props as P}来解决此问题。

React＆TypeScript HOC-为什么我无法将类型'{}'分配给类型P？

1 个答案: