Reactjs TypeScript返回类型与decorator兼容

我正在将React Native与TypeScript一起使用。我写了一个HOC，我喜欢用它作为装饰器，给组件一个徽章：

import React, { Component, ComponentClass, ReactNode } from "react";
import { Badge, BadgeProps } from "../Badge";

function withBadge<P>(
  value: number,
  hidden: boolean = value === 0
): (WrappedComponent: ComponentClass<P>) => ReactNode {
  return (WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
      render() {
        return (
          <React.Fragment>
            <WrappedComponent {...this.props} />
            {!hidden && <Badge value={value} />}
          </React.Fragment>
        );
      }
    };
}

export default withBadge;

我尝试了其他不同的返回类型，如

JSX.Element

或

ReactElement）到
typeofpureComponent
带徽章（1）

的错误更改为：

[ts]
Unable to resolve signature of class decorator when called as an expression.
  Type 'typeof PureComponent' is not assignable to type 'typeof BadgedOrders'.
    Type 'PureComponent<any, any, any>' is not assignable to type 'BadgedOrders'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '() => Element'.
          Type 'ReactNode' is not assignable to type 'Element'.
            Type 'undefined' is not assignable to type 'Element'. [1238]

抛出错误：

[ts]
Unable to resolve signature of class decorator when called as an expression.
  Type 'null' is not assignable to type 'void | typeof BadgedCart'. [1238]

[ts]
Type '(WrappedComponent: ComponentClass<P, any>) => typeof BadgedComponent' is not assignable to type '(WrappedComponent: ComponentClass<P, any>) => PureComponent<{}, {}, any>'.
  Type 'typeof BadgedComponent' is not assignable to type 'PureComponent<{}, {}, any>'.
    Property 'context' is missing in type 'typeof BadgedComponent'. [2322]

[ts]
类型“（WrappedComponent:ComponentClass）=>typeof BadgedComponent”不可分配给类型“（WrappedComponent:ComponentClass）=>PureComponent”。
类型“typeof BadgedComponent”不可分配给类型“PureComponent”。
类型“typeof BadgedComponent”中缺少属性“context”。[2322]

第一个问题是

p

不在可以推断的位置。因为它是用Badge打开的

，而该调用将不包含它

第二个问题是类装饰器必须返回
void
或与输入类相同的类型：

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

你可以考虑用一个简单函数调用放弃装饰方法：
class Badge extends React.Component<{ value: number }> { 

}

function withBadge(
    value: number,
    hidden: boolean = value === 0
): <P extends object>(WrappedComponent: ComponentClass<P>) => ComponentClass<P> {
return <P extends object>(WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
        render() {
            return (
            <React.Fragment>
                <WrappedComponent {...this.props} />
                {!hidden && <Badge value={value} />}
            </React.Fragment>
            );
        }
    };
}

const  BadgedCart = withBadge(1)(class extends PureComponent {
    render() {
        return (
        <div />
        );
    }
});
export default BadgedCart;

class.Component{
}
带徽章的功能(
值：number，
隐藏：布尔值===0
)：（WrappedComponent:ComponentClass
）=>ComponentClass
{
return
（WrappedComponent:ComponentClass
）=>
类BadgedComponent扩展组件
{
render（）{
返回(
{！隐藏&}
);
}
};
}
const BadgedCart=withBadge（1）（类扩展了PureComponent{
render（）{
返回(
);
}
});
导出默认的BadgedCart；
您可以在BadgedCart类中添加函数，将显示错误。
declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

class Badge extends React.Component<{ value: number }> { 

}

function withBadge(
value: number,
hidden: boolean = value === 0
): <P extends object>(WrappedComponent: ComponentClass<P>) => void {
return <P extends object>(WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
    render() {
        return (
        <React.Fragment>
            <WrappedComponent {...this.props} />
            {!hidden && <Badge value={value} />}
        </React.Fragment>
        );
    }
    };
}

@withBadge(1)
export default class BadgedCart extends PureComponent {
    render() {
        return (
        <div />
        );
    }
}

class Badge extends React.Component<{ value: number }> { 

}

function withBadge(
    value: number,
    hidden: boolean = value === 0
): <P extends object>(WrappedComponent: ComponentClass<P>) => ComponentClass<P> {
return <P extends object>(WrappedComponent: ComponentClass<P>) =>
    class BadgedComponent extends Component<P> {
        render() {
            return (
            <React.Fragment>
                <WrappedComponent {...this.props} />
                {!hidden && <Badge value={value} />}
            </React.Fragment>
            );
        }
    };
}

const  BadgedCart = withBadge(1)(class extends PureComponent {
    render() {
        return (
        <div />
        );
    }
});
export default BadgedCart;