.flowconfig [declarations]

開心使用第三方套件的另一種方法

一般來說,除非這個第三方套件本身就是使用 Flow 來開發的,不然是不會有非常完整的 Flow 支援的,通常是新版本發佈後才會慢慢有 Flow 的支援。

假設說有個套件版本在 v2.0.0,社群已經在這個版本為其發佈了相對應的 Flow 型別支援到 flow-typed 上面了,但隨著時間的推進,該套件發佈 v2.0.1 了,可能變動只是改了幾個內部小 bug 與優化 ,最終給使用者使用的東西沒有什麼更動。這時候之前 flow-typed 上面的型別支援已經不完全正確了,我們是要為了 Flow 型別的完整而犧牲使用 v2.0.0 的未優化版本呢?還是想辦法繼續使用 v2.0.1 呢? 我想答案肯定是能使用新版就盡量使用新版吧~!

特性簡介

.flowconfig[declarations] 部分透過正規表達式的方式來決定哪些檔案或目錄要包含。儘管被包含的檔案不會進行型別檢查,但是最終被引入時還是會是預期出來的類型。

這有點抽象... 該怎麽說呢?來個範例吧!!

.flowconfig
declarations.js
import.js
.flowconfig

指定專案下的 declarations.js 檔案為 declarations

[declarations]
<PROJECT_ROOT>/declarations.js
declarations.js
// @flow
let num: number = 100;
// 都是ok的! 因為此檔案被標註為 declarations 了
num = '120';
num = 120;
export default num;
import.js
// @flow
import num from './declarations.js'
(num: number);
(num: string); // 錯誤! 型別錯誤

可以看到上面的範例中的 declaration.js 就算有明顯錯誤也通過檢查了,但是在被其他檔案引入的時候依舊保有著型別 number 型別。

這個範例明確的闡述了 [declarations] 的用意:

即使實作細節有更動,但是結果仍然是一樣的,就可以先繼續使用

畢竟我們在使用第三方套件的時候用的不是他的實作,而是輸出結果。這樣有沒有更加瞭解了呢!

設定檔

  1. 請確保使用 [declarations] 的項目是第三方套件,自己能控制的項目就不要用到這個了,自己開發的應保持型別正確,而不該貪圖方便而忽略掉。

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

  3. 從 Flow v0.23.0 開始,支援使用 <PROJECT_ROOT>

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

以上的設定會包含:

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

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

  3. 專案目錄下,所有檔案名稱以 .decl.js 結尾的檔案

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