如何使用 Typescript 正确输入 react HOC

Question

我是 Typescript 的新手，我不知道如何用它正确键入 HOC。我已经花了一整天的时间来弄清楚它没有任何成功。我有一个非常基本的代码 sn-p 和 BaseComponent 和一个简单的 HOC。由于某种原因，在创建 BaseComponent 时，我收到 Typescript 错误：

Type '{ total: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'. Property 'total' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'.

知道如何正确设置 Prop 类型吗？

基础组件：

interface SummaryProps {
    sum: number;
}

class Summary extends React.Component<SummaryProps> {
    render() {
        return (
            <div>{this.props.sum}</div>
        );
    }
}

export default withMyHOC(Summary);

HOC：

interface WithMyHOCProps {
    total: number;
}

const withMyHOC = (WrappedComponent: React.ComponentType<any>): React.ComponentClass => {
    return class extends React.Component<WithMyHOCProps> {
        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    sum={this.props.total + 1}
                />
            );
        }
    };
};

export default withMyHOC;

初始化：

import Summary from 'features/Summary.tsx';

<Summary total={5} /> // here I am getting Typescript error described above

Answer 1

通过传递{...this.props}，您也将withMyHOC 的所有道具传递给底层组件。这也包括total，但Summary 没有属性“total”。

所以 oyu 也需要为孩子添加所有的道具。