第一部分:前言
我們知道JS是弱類型語言,在聲明變量時不論是什么類型的變量我們都用var即可,所以js是非常靈活的,但是同時問題就是弱類型語言有可能會出錯,比如在調用函數時,且往往在運行起來時才可以檢查,於是facebook開源了flow.js,它可以看做是強類型的js,即在聲明變量時使用具體的類型名稱,在運行前編譯為正常的js即可。 flow.js的理念類似於typescript,但是他比typescript更輕,更容易遷移,因為我們只需要做出很小的改變就可以使用flow.js,而typescript卻非如此,它就像一門新的語言,所以目前flow.js是非常流行的,包括vue也使用了flow.js。
flow.js是前兩年才出現的,當前版本為v0.49.1,目前在github上已經有了10000多star,可見flow.js還是非常流行的。 所以我們可以嘗試在項目中使用flow.js。
官網上是這樣介紹的:flow.js是用來為js做靜態類型檢查的。
flow.js的特點如下:
- Code Faster。因為通過使用flow.js,我們可以減少很多不必要的錯誤 --- flow.js會在你敲代碼的過程中就幫你檢查代碼中的錯誤,這樣就不用再運行的時候不停地去尋找錯誤了。、
- Code Smarter。對於像js這樣的動態語言我們很難創建聰明的工具。而flow.js理解你的代碼,使得你更聰明的寫代碼。
- Code Confidently。 對代碼做出巨大的改變是非常恐怖的。flow.js可以幫助你更快地重構,這樣你就不用擔心很多可能出現的問題了。
- Code Bigger。 很多開發人員同時對一個項目開發是很困難的。而flow.js可以幫助你解決這個問題,因為即使是半年前寫的代碼,使用flow.js依然可以讓你輕松看明白。
第二部分:Getting Start
flow是用於檢查js代碼的靜態類型檢測器。 它做了很多工作以使得你寫代碼的效率更高效。使得你寫的更快、更聰明、更自信並且寫的代碼是可以非常大的。
flow會通過靜態類型注釋來檢測你錯誤的代碼,這些類型允許你告訴flow你想讓你的代碼如何工作,並且flow將會保證它。 如下所示:
// @flow function square(n: number): number { return n * n; } square("2"); // Error!
因為flow已經對js非常了解了,所以他不需要太多的類型,你應該做的僅僅是告訴flow必要的對於代碼的描述然后flow就會做好剩下的工作了。 大部分時候,flow甚至可以不需要聲明類型就理解你的代碼。 如下所示:
// @flow function square(n) { return n * n; // Error! } square("2");
你也可也以讓flow不起作用,所以你可以嘗試使用它和不使用的區別所在。
第三部分: Installation
對於安裝flow,是有很多種方法的,這取決於你在項目中使用了哪些工具,比如,我們可以使用Yarn作為包管理工具,也可以使用npm作為包管理工具;我們可以使用Babel作為編譯js的工具,也可以使用專用工具flow-remove-types。
安裝編譯器
首先,你需要安裝編譯器,可以在babel和flow-remove-types之前作出選擇,Babel是一個js代碼編譯器並且是支持flow的。 首先安裝 babel-cli 和 babel-preset-flow, 這里使用npm安裝:
npm install --save-dev babel-cli babel-preset-flow
接着你應該創建一個.babelrc的文件在你的項目根目錄下,並且包括下面的代碼:
{ "presets": ["flow"] }
安裝flow
將flow-bin添加到devDependency。
npm install --save-dev flow-bin
接着添加一個‘flow’script到你的package.json中。
{ "name": "my-flow-project", "version": "1.0.0", "devDependencies": { "flow-bin": "^0.41.0" }, "scripts": { "flow": "flow" } }
然后就可以運行了,第一次運行如下所示:
npm run flow init
在第一次運行flow之后,就可以像下面這樣運行了:
npm run flow
注意:在使用的過程中可能會遇到一個問題,具體答案參考這篇文章。
第三部分: 使用
一旦你安裝好了flow,那么你一定想要感覺一下怎么最簡單的開始使用flow,對於大部分的flow工程,你需要學習下面基本的模式:
- 初始化你的項目通過使用 flow init
- 開始flow后台進程使用flow
- 決定哪個文件將會被監視(monitor)使用// @flow
- 開始在你的項目中寫flow代碼。
- 檢查你代碼中的類型錯誤。
初始化你的項目
着手准備一個flow項目需要一行命令:
flow init
在你的項目的層級上來執行這條命令。在基本水平上,.flowconfig 告訴了flow 后台進程要進行flow檢測的根目錄。
這樣你的項目現在就是支持flow的了。
.flowconfig是一個空文件是很常見的事情。 然后,你可以通過多種方式來配置以及個性化flow通過添加配置選項添加到.flowconfig中。
運行flow的后台進程
flow最重要的地方在於快速檢測你代碼中錯誤的地方,一旦你激活了項目中的flow,俺么你哭可以開啟進程時flow以最快的速度檢測你的代碼錯誤。
flow status
這條命令首先開啟了一個后台進程為了尋找錯誤來檢測所有的flow文件。后台進程會持續運行,監視着你的代碼的改變並且儀最快的速度來檢查。
你也可以直接輸入flow來完成相同的功能,因為status對於flow二進制文件來說是一個默認的flag。
只有一個后台進程運行到指定時間了,你才能運行flow status多次, 因為它會始終使用同一個進程。
為了停止后台進程,運行 flow stop。
准備為你的代碼使用flow語法
flow后台進程會監視着所有的flow文件,然后,怎么樣才能讓他知道哪些文件時需要flow的呢?並且該如何監測呢? 請將下面的代碼放在一個js文件的代碼最前面,這就是后台進程會監測的文件的標志:
// @flow
這個標志是現代JavaScript使用flow所需要的。 flow后台進程會匯集所有的有這個標記的文件並且使用所有有用的類型信息來確保一致性對於編程。
如果你的項目中沒有這個flag,那么flow后台進程就會跳過並且忽略這些代碼(除非你調用flow check --all)。
寫flow代碼
既然所有的安裝和初始化都已經完成了,那么現在你就可以開始着手准備些真正的flow代碼了。 對於每一個你已經使用了// @flow標記的文件,你現在就對他有了完全的控制權利和類型檢測權利,下面是一個flow文件的例子:
// @flow function foo(x: ?number): string { if (x) { return x; } return "default string"; }
注意,這里的類型添加到了參數當中並且在函數的最后還指定了函數的返回類型。你可以從這個代碼中判斷出來這里再返回類型處有一個錯誤,因為這個函數可能放回一個int, 然而,你是不需要自己去用眼睛來檢測觀察代碼錯誤的,因為flow后台進程將能夠捕獲到這個錯誤當你檢查代碼時。
檢查你的代碼
使用flow.js最大的好處在於它幾乎可以實時的給你代碼狀態的反饋,在任何事件你想要檢查代碼錯誤,直接運行 :
flow
即可,這等效於使用flow status, 第一次運行flow,flow的后台進程需要檢查你所有的文件,當再一次運行時,flow就會直接來給出結果了。 對於上面的代碼,運行flow將會yield,如下:
test.js:5 5: return x; ^ number. This type is incompatible with the expected return type of 3: function foo(x: ?number): string { ^^^^^^ string