Question

当使用React 16新功能：componentDidCatch时，我尝试编写一个HOC来抽象代码。并使用装饰器实现它。代码如下：

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

  }
  return HOC;
}

就像使用它一样：

@catcher
export class Foo extends React.Component {}

但是，发生了错误

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

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

Answer 1

docs说装饰器的第一个参数是构造函数，所以我们必须给T一个构造函数签名。文档中的示例具有返回{}的构造函数，但是如果我们要确保装饰器不能仅用于任何类型并且必须在React.Component上使用，我们可以让构造函数返回{ {1}}，因此传递的任何构造函数都必须返回React.Component或兼容（实际上必须从React.Component派生）

React.Component

构造函数签名的替代语法是：

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  {
}

编写装饰器时TypeScript泛型错误？

1 个答案: