.flowconfig [untyped]

指定 Flow 不檢查型別的檔案

Flow 在引入檔案的時候需要知道如何處理這些檔案,對於某些第三方套件我們可能不想要解析、有些要解析但是不保留型別、或是解析了但是不要進行錯誤檢查等等。 主要取決於這些第三方套件本身與社群的 Flow 型別完整度。

特性簡介

.flowconfig[untyped] 部分透過正規表達式的方式來決定哪些檔案或目錄要忽略型別,被指定到的檔案 Flow 將不會對他進行型別檢查,並且在被引入時會將所有出去的型別視為 any

[untyped] 不是單純的不去檢查這些檔案,而是以下兩個方法處理被指定到的檔案:

將這些檔案都視為 未經型別檢查的 ( un-typechecked )

untyped.js
// @flow
let num: number = 100;
num = '120'; // ok!
export default num;

簡單來說,就是檔案內不進行任何型別檢查,寫起來跟被 [ignore] 一樣,就像平常寫 js 檔。

import 與 require 等的引入將會 無法分辨其型別 ( unresolvable )

import.js
// @flow
import num from './untyped.js'
(num: number);
(num: string);

我們現在引用剛才寫的範例 untyped.js 檔 export 出來的 num,你覺得取得到的會是 number 或是後來的 string 呢?程式又沒有報錯,坦白說連我都不能確定了! 不過我們將它標記為 [untyped] 了,所以不用擔心,在這邊引入的 num 不管怎麼樣,一定會是 any 型別!就這麼簡單~~

設定檔

  1. 在這邊的正則表達式是不接受 / 為根目錄 的,若是要指定專案目錄底下請使用 .*開頭。

  2. 從 Flow v0.23.0 開始,支援使用 <PROJECT_ROOT> 關鍵字來代表根目錄。

[untyped]
.*/third_party/.*
.*/src/\(foo\|bar\)/.*
.*\.untype\.js
<PROJECT_ROOT>/__third_party__/.*

以上的設定會包含:

  1. 專案目錄下,所有目錄名稱為 third_party

  2. 專案目錄下,所有目錄結構為 src/foosrc/bar 的都忽略掉

  3. 所有以 .untype.js 為結尾的檔案都忽略掉

  4. 專案目錄下,目錄名稱為 __third_party__

與其他設定的比較

[ignore]

前面說過,[ignore] 就是字面上的意思「忽略」掉那些檔案,而 [untyped] 則是不進行型別檢查,通通當成 any 型別。

在引用的時候會最明顯,若是引入了被 [ignore] 的檔案,程式直接就會報 cannot-resolve-module 了。

而引入 [untyped] 檔案則是剛才講的,不管它 export 了什麼東西,都一定會得到 any 的回傳型別。

引入 [ignore]
引入 [untyped]
引入 [ignore]
// @flow
import ignore from './ignore.js'; // 錯誤! cannot-resolve-module
引入 [untyped]
// @flow
import num from './untyped.js'
(num: number); // ok
(num: string); // ok
(num: boolean); // ok

[declarations]

[declarations] 的話之後會詳細講到,現在可以簡單的理解為他忽略了所有 Flow 的檢查,但是最後還是會有正常的形態輸出,而 [untyped] 也是忽略了所有型別檢查沒錯,但是他是因為當成 any 所以忽略了。

在引用的時候,若是引入了被 [declarations] 的檔案,程式會正常回傳形態,沒有任何錯誤。

而引入 [untyped] 檔案則是剛才講的,不管它 export 了什麼東西,都一定會得到 any 的回傳型別。

引入 [declarations]
引入 [untyped]
引入 [declarations]
// @flow
import num from './declarations.js'
(num: number); // ok
(num: string); // 錯誤
(num: boolean); // 錯誤
引入 [untyped]
// @flow
import num from './untyped.js'
(num: number); // ok
(num: string); // ok
(num: boolean); // ok