流 HTMLElement.querySelector 返回一个 iframe

Question

Flow 似乎无法识别 querySelector 可能返回 HTMLElement 的子类型：

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

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

foo(myIframe);

生产

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

开启https://flowtype.org/try。

除了输入Object之外，有什么方法可以让我同时使用HTMLElement 属性和HTMLIFrameElement 属性吗？

Answer 1

Flow 不知道如何解析选择器，它需要这样做才能了解将返回什么样的元素。不过它能够理解getElementsByTagName 的更简单的API，所以it knows getElementsByTagName('iframe') 返回HTMLCollection<HTMLIFrameElement>。

使用querySelector，您需要强制转换它。像这样的：

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