高阶组件的类型验证

Question

问题基本上是如何确保以典型的 JavaScript 方式实现 higher-order components 的类型检查。

Hoc1 = (superclass) => class extends superclass { ... }
class A { ... }
class B extends Hoc1(A) { ... }

我所说的类型检查是指使用两个最著名的实用程序中的任何一个：TypeScript or flow.

到目前为止，我已经用 TypeScript 编写了以下代码片段，

interface IAMixin {
  aMixedMethod(): void
}
interface IAMixinConstructor {
  new(): IAMixin
}

const AHoc: <T>(superclass: T) => T & IAMixinConstructor = (superclass) =>
  class extends superclass implements IAMixin {
    aMixedMethod() {}
}

class A {
  aMethod() {}
}
class B extends AHoc(A) {
  bMethod() {}
}

const b = new B();

b.aMixedMethod(); // false-positive: incrorrectly reports as missing method
b.aMethod();
b.bMethod();
b.cMethod(); // this is correctly caught, though

如果我这样写mixin

const AMixin: (superclass) => typeof superclass & IAMixinConstructor =
  (superclass) => class extends superclass implements IAMixin {
    aMixedMethod() {}
  }

然后它认为 superclass 为 any 并且假阴性错过了 cMethod.

的调用错误

这似乎至少在 TypeScript 中是可能的，因为他们有，例如Object.assign 正确工作 个实例 。但是我需要同类的构造，但是对于classes.

或者我们是否需要 class 类型，例如 Ruby classes？

Answer 1

缺少的是将 AHoc 参数定义为 class 的构造函数类型，而不是实际实例，返回值也是如此：

interface IAMixin {
  aMixedMethod(): void
}

const AHoc: <T>(superclass: new () => T) => new () => (T & IAMixin) =
    (superclass) => class extends superclass implements IAMixin {
        aMixedMethod() { }
    }

class A {
  aMethod() {}
}
class B extends AHoc(A) {
  bMethod() {}
}

const b = new B();

b.aMixedMethod(); // now good
b.aMethod();
b.bMethod();
b.cMethod(); // this is correctly caught

高阶组件的类型验证

type validation for higher order components

mixins

typescript

ecmascript-6

flowtype

higher-order-components