dom - 将流与 document.querySelector 一起使用

Question

我是 Flow 的新手，在正确分配 DOM 元素类型时遇到了一些问题。

查看 DOM declarations在 Flow 存储库中，我感觉好像遗漏了什么。

// 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

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

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 中很常见，被称为细化类型。