與document.querySelector一起使用流程

Question

我是Flow的新手，並且正確分配給DOM元素類型時遇到了一些問題。

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

已經在嘗試流REPL工具來看看the example。

Answer 1

流程不夠聰明，無法知道任何querySelector查詢的返回類型。簡單的元素名稱查詢已被硬編碼到內建類型定義中。你可以在Flow's Github repo看到他們。

流量知道，結果是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，流量會認識到，metaTag必須現在是鍵入HTMLMetaElement。這種類型的行爲在Flowtype中非常常見，被稱爲精煉類型。