JS Flow：Flow 中的继承是否被破坏？

Question

假设您有一个从类 A 扩展而来的类 B。您创建 B 类型的对象并调用 A 中定义的方法 fooA，然后调用 B 中定义的方法 fooB。

class A {
  fooA () {
    console.log('fooA called')
    return this
  }
}

class B extends A {
  fooB () {
    console.log('fooB called')
    return this
  }
}

new B().fooA().fooB()

运行时，代码按预期记录以下内容

fooA called
fooB called

所以 Javascript 理解 new B().fooA() 是 B 类的对象。但是 Flow 给了我以下错误消息：

Cannot call new B().fooA().fooB because property fooB is missing in A

怎么办？我对不需要更改父类 A 的解决方案感兴趣，因为它是在 npm 包中定义的。不过我可以换B。

Answer 1

如果您将fooA 方法键入为返回this，则Flow 理解任何扩展A 类的类也将从该方法返回它们自己的一个实例：

(Try)

class A {
  fooA (): this {
    console.log('fooA called')
    return this
  }
}

class B extends A {
  fooB () {
    console.log('fooB called')
    return this
  }
}

new B().fooA().fooB() // No error

由于您不想更改A 类：另一个简单的方法是输入B 类的fooA 函数以返回B 的实例：

(Try)

class A {
  fooA () {
    console.log('fooA called')
    return this
  }
}

class B extends A {
  fooB () {
    console.log('fooB called')
    return this
  }
  fooA: () => B; // Hey Flow, this actually returns a B
}

new B().fooA().fooB() // No error!

Answer 2

函数 fooA() 返回“this”，它是“A”的一个实例。如您所知，类 A 不知道方法 fooB 存在。因此，Flow（正确地）指出 A 中缺少属性 fooB。

你知道事实上，这个特定的 A 实例也是 B 的一个实例，但 Flow 无法推断出这一点。您必须告诉它 fooA() 返回的 A 是此特定场景中使用强制转换的 B 的一个实例。

将您的呼叫更改为 (new B().fooA(): B).fooB() 应该可以解决 Flow 错误。

Javascript（无流）不关心这种语义。当您在 fooA() 返回的对象上调用“fooB”时，它只是在对象中查找一个名为“fooB”的方法，该方法恰好存在，因此它可以工作，尽管它更容易因重构而中断。 Flow 很有帮助，因为它会迫使您了解正在抛出的类型，并在将来为您提供这些问题的编译时检查。