JS Flow：流程中的继承是否破裂？

Question

Consider a situation where you have a class B extending from class A. You create an object of type B and call a method fooA defined in A and then a method fooB defined in B.

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

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

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

When run, the code logs the following as expected

fooA called
fooB called

So Javascript understands that new B().fooA() is an object of class B. However Flow gives me the following error message:

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

What to do? I'm interested in a solution where I do not need to change the parent class A because it is defined in an npm package. I can change B though.

Answer 1

If you type the fooA method as returning this , then Flow understands that any classes that extend the A class will also return an instance of themselves from the method:

( 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

Since you don't want to change the A class: another easy way to get this working is to type the fooA function of B class to return an instance of 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

The function fooA() returns "this" which is an instance of "A". As you know, the class A has no idea that the method fooB exists. Therefore, Flow (rightfully) points out that the property fooB is missing in A.

You have the knowledge that in fact, this particular instance of A is also an instance of B, but Flow can't infer that. You have to tell it that the A returned by fooA() is an instance of B in this specific scenario using casting.

Changing your call to (new B().fooA(): B).fooB() should resolve the Flow error.

Javascript (sans Flow) doesn't care about this semantic. When you call "fooB" on the object returned by fooA() it just looks for a method called "fooB" in the object, which happens to exist, so it works, although it is more prone to breaking with refactor. Flow is helpful because it forces you stay cognizant of what types are being thrown around and gives you compile-time checks for these problems in the future.