Question

我是Flow的新手，在正确分配DOM Element类型方面遇到了一些麻烦。

查看Flow回购中的DOM declarations，感觉我错过了什么。

// Works 
const otherMeta:?HTMLMetaElement = document.querySelector("meta");

//Doesn't work
const metaTag:?HTMLMetaElement = document.querySelector("meta[name='something']");

第二个示例导致以下错误：

const metaTag:?HTMLMetaElement = document.querySelector("meta[name='something']");
                                 ^ HTMLElement. This type is incompatible with
const metaTag:?HTMLMetaElement = document.querySelector("meta[name='something']");
               ^ HTMLMetaElement

在Try Flow REPL工具中查看the example。

Answer 1

Flow不够智能，无法知道任意querySelector查询的返回类型。简单的元素名称查询已经硬编码到内置类型定义中。您可以在Flow's Github repo中看到它们。

要让Flow知道结果是HTMLMetaElement，您需要使用

之类的代码显式验证

const metaTag: ?HTMLElement = document.querySelector("meta[name='something']");
if (metaTag && !(metaTag instanceof HTMLMetaElement)) throw new Error("Expected a 'meta' element.");

// use metaTag here

因此，通过明确检查instanceof，Flow会认识到metaTag 必须现在是HTMLMetaElement类型。这种类型的行为在Flowtype中非常常见，并且被称为改进类型。

在document.querySelector中使用flow

1 个答案: