Flow HTMLElement.querySelector returning an iframe

Question

Flow doesn't seem to recognize that querySelector may return subtypes of HTMLElement:

var myIframe = document.querySelector('iframe');

function foo(iframe: HTMLIFrameElement): void {
  // I want to do iframe stuff!
}

foo(myIframe);

Produces

10: foo(myIframe);
        ^ HTMLElement. This type is incompatible with
6: function foo(iframe: HTMLIFrameElement): void {
                        ^ HTMLIFrameElement

On https://flowtype.org/try.

Is there any way I can type myIframe that will let me use both its HTMLElement properties and its HTMLIFrameElement properties, apart from typing it as Object?

Answer 1

Flow doesn't know how to parse a selector, which it would need to do to understand what kind of element would be returned. It is able to understand getElementsByTagName's simpler API, though, so it knows that getElementsByTagName('iframe') returns HTMLCollection<HTMLIFrameElement>.

Using querySelector, you'd need to cast it. Something like this:

var myIframe = ((document.querySelector('iframe'): any): HTMLIFrameElement);