Javascript 编写装饰程序时出现TypeScript通用错误？

当使用新特性componentDidCatch时，我尝试编写一个HOC来抽象代码。并用decorator实现它。 代码如下：

import * as React from 'react';
export function catcher<P, T extends React.ComponentClass<P>>(Target: T): T {
  class HOC extends Target {

  }
  return HOC;
}

但是，出现了错误

[ts] Type 'T' is not a constructor function type.

[ts] Type 'typeof HOC' is not assignable to type 'T'

假设decorator的第一个参数是构造函数，所以我们必须给T一个构造函数签名。文档中的示例让构造函数返回

{}

，但是如果我们想确保装饰器不能用于任何类型，并且必须用于

React.Component

，我们可以让构造函数返回

React.Component

，因此，任何通过的构造函数都必须返回

React.Component

或兼容的（实际上必须从

React.Component

派生）

导出函数捕捉器（构造函数：T）{
类HOC扩展构造函数{
}
返回HOC；
}
@捕手
导出类Foo扩展React.Component{
}
@catcher//将是一个错误，Foo2不是从React.Component派生的
出口类别2{
}

构造函数签名的另一种语法是：

export function catcher<S, P, T extends new (... args:any[]) => React.Component<S, P>>(constructor:T) {
  class HOC extends constructor {

  }
  return HOC;
}

导出函数catcher React.Component>（构造函数：T）{
类HOC扩展构造函数{
}
返回HOC；
}

T.ComponentClass

是一个构造函数签名；查看mobx react index.d.ts:export function observer（target:tffunction）：tffunction//decoratorsignature@ZiyuZhou是的，这是装饰师的一个有效定义。如果您不需要创建一个新类来扩展原始类，那么它就可以工作了。mobx react不需要该签名的原因是，它只需要一个有效的decorator签名，就可以在JS中完成工作。如果您希望能够在extends子句中使用

T

，那么Typescript必须能够检查

constructor

参数是否是有效的构造函数，这可以通过确保

constructor

不仅仅是一个函数，而是一个实际的类型构造函数来实现

export function catcher<S, P, T extends { new (... args:any[]): React.Component<S, P>  }>(constructor:T) {
  class HOC extends constructor {

  }
  return HOC;
}

@catcher
export class Foo extends React.Component {
}

@catcher // Will be an error, Foo2 is not derived from React.Component
export class Foo2  {
}

export function catcher<S, P, T extends new (... args:any[]) => React.Component<S, P>>(constructor:T) {
  class HOC extends constructor {

  }
  return HOC;
}