Question

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

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

通过类型检查，我的意思是使用两个最突出的实用程序中的任何一个：TypeScript或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正确地为实例工作。但我需要构造相同的类型，但对于类。

或者我们是否需要像Ruby classes这样的课程类型？

Answer 1

缺少的是定义AHoc参数作为类的构造函数类型而不是实际实例，并且返回值相同：

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

高阶组件的类型验证

1 个答案: