打字稿编译错误：类型“ {}”不可分配给类型“ T”

Question

我正在使用带有Typescript的React来创建高阶组件（HOC），并且无法理解Typescript编译器返回的错误。我已经解决了我的问题，但是不知道为什么会起作用。

对于这里发生的一切，我将不胜感激。

我的错误是：类型'{}'不能分配给类型'T'

我阅读了有关类型解析问题的多篇文章，并且在大多数情况下，Typescript似乎在做自己的工作。我的感觉就是这里，但是，我不明白自己在做什么错。我尝试弄乱类型签名，在这种情况下，它要么不能解决此问题，要么将错误推送到引用代码。

代码生成错误

organizer  title   percentage
2          music   40%
2          sports  60%
3          music   100%

带有Fix的代码（注意道具作为包装组件的参数传播）

import React, { Component, ComponentType } from 'react';

const withClass = <T extends object>(WrappedComponent: ComponentType<T>, className: string):
    React.FunctionComponent<T> =>
        (props: any) => (
            <div className={className}>
                <WrappedComponent />
            </div>
        );

export default withClass;

我希望第一段代码可以正确编译，但事实并非如此。为什么？

Answer 1

据我所记得，因为这是一个功能组件，所以您应该为道具烦恼。我认为，如果您将使用类组件，则该问题将消失，因为默认情况下，该类组件会在构造器方法 super（props）中被调用。我有同样的错误，但是使用样式道具（CSSModules），实际上，我选择了特定的道具，而没有在组件中传递其余的道具（ ... rest ）。因此，我认为因为您正在扩展TypeScript接口（我不确定），所以您没有传递所需的道具。传播之后，您正在传递所需的道具。注意：spread attributes

Answer 2

也许我跳得太早了，因为我的错误突然变得很明显！

因此，HOC的整个思想是能够通过合成来扩展组件的行为。如果您是来自OO的背景，则这是规范的装饰器模式，但是是通过功能组合而不是对象进行配置的。

上面第一个示例的问题是Typescript抱怨我已将包装的组件标记为具有T道具，但没有使用 any 道具实例化该组件！ / p>

获胜者将获得...打字稿！

Typescript试图引导我走上正确的道路，但是，当然，我不想听，而是试图将责任归咎于Typescript。虽然，我必须承认，此时Typescript规范似乎正在演变为杂技类型。 HOC当然在这方面无济于事。

对于那些不幸的人，也可能碰到了这个心理绊脚石。这是最终的解决方案，并提供了屏幕截图，可以更好地理解我在上面要说的内容。

上面的第二个解决方案可以工作，但是在道具上使用T会更合适。在这里，我正在使用控制台记录要传递到包装组件的道具。

import React, { Component, ComponentType } from 'react';

const withClass = <T extends object>(WrappedComponent: ComponentType<T>, className: string):
    React.FunctionComponent<T> =>
        (props: T) => {
            console.log(props);
            return (
                <div className={className}>
                    <WrappedComponent {...props} />
                </div>
            );
        }

export default withClass;