子类工厂的类型注释

Question

我最近开始将我公司的一个项目的代码库迁移到 TypeScript，我正在努力为这段代码的类型注释而苦恼：

function factory( Base ) {
  return class Extended extends Base {
    ...
  }
}
const Extended = factory( React.Component );
const PureExtended = factory( React.PureComponent );

我试图用TypeScript描述什么：

• 工厂只接受从 React.Component 类继承的类。
• factory 返回继承自 React.Component 类的类。

我尝试过：

function factory( Base: React.Component<P, S> ): React.Component<P, S> {
  return class Extended extends Base {
    ...
  }
}
const Extended = factory( React.Component );
const PureExtended = factory( React.PureComponent );

这在类型检查中严重失败。

我正在使用：

• 打字稿 2.5.2
• Visual Studio Code 1.16.1
• @types/反应 16.0.14

Answer 1

似乎我设法让它使用它：

type RCConstructor<P, S> = new(...args: any[]) => React.Component<P, S>;
function factory<T extends RCConstructor<{}, {}>> ( Base: T ) {
  return class Extended extends Base {
    /* Extended implementation */
  };
}
export const Extended = factory( React.Component );
export const PureExtended = factory( React.PureComponent );

解决方案来自 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html。从文档中可以明显看出这里发生了什么。现在真正的问题是"为什么 https://www.typescriptlang.org/docs/handbook/mixins.html 不报道这个？

Answer 2

如您在答案中链接到的文章所示，您需要使 mixin 工作是Constructor类型。（可选）可以通过向 Constructor 提供特定类型来约束可扩展的类。

type Constructor<T> = new(...args: any[]) => T;
function factory<T extends Constructor<React.Component>> ( Base: T ) {
  return class Extended extends Base {
    /* Extended implementation */
  };
}
export const Extended = factory( React.Component );
export const PureExtended = factory( React.PureComponent );