用作装饰器的 TypeScript HOC 的正确返回类型是什么？答案

【问题标题】：What's the correct return type for a TypeScript HOC being used as a decorator?用作装饰器的 TypeScript HOC 的正确返回类型是什么？
【发布时间】：2018-06-10 13:34:29
【问题描述】：

我正在尝试用 TypeScript 编写一个简单的 HOC，但我对返回类型应该是什么感到困惑。 HOC 如下所示：

export const requiresUser = <P extends object>(Component: React.ComponentType<P>) =>
  class RequiresUser extends React.Component<P> {
    componentDidMount() {
      console.log("requires user")
    }

    render() {
      return <Component {...this.props} />
    }
  }

如果我在这样的组件中使用它：

@requiresUser
export class DashboardPage extends React.Component<{}> {

  someFunction = () => {
    console.log("hi")
  }

  render() {
    return (
      <div>
        DashboardPage
      </div>
    )
  }
}

因为someFunction 函数，编译器很伤心。如果我删除该功能，一切都会很酷很开心，因为我猜它们都可以很好地匹配，而无需显式设置任何内容。这是组件包含someFunction时的错误：

(11, 1): Unable to resolve signature of class decorator when called as an expression.
  Type 'typeof RequiresUser' is not assignable to type 'typeof DashboardPage'.
    Type 'requiresUser<{}>.RequiresUser' is not assignable to type 'DashboardPage'.
      Property 'someFunction' is missing in type 'requiresUser<{}>.RequiresUser'.

所以我的问题是，HOC 的返回类型应该是什么，以允许使用它的组件定义他们想要的任何功能？返回any 使其工作，但感觉就像在作弊..

【问题讨论】：

标签： reactjs typescript higher-order-components

【解决方案1】：

现在似乎 typescript 不支持装饰器中的类型突变（因为装饰组件与原始组件不同）。

https://github.com/Microsoft/TypeScript/issues/4881

解决方法：

export const requiresUser = <
  P,
  T extends { new (props: P): React.Component<P> }
>(
  Component: T
): T => {
  class RequiresUser extends React.Component<P> {
    componentDidMount() {
      console.log("requires user");
    }

    render() {
      return <Component {...this.props} />;
    }
  }
  return RequiresUser as T;
};

【讨论】：