煦涵說Flow

Flow是Facebook出品的一個JavaScript代碼的靜態類型檢查工具，它作了不少處理，使您的代碼更快，更智能，更自信，更好的適應性。如今已經在前端比較流行的React 、Vue 等框架中獲得使用。今天煦涵就和你們一塊兒來學習Flow以及在實際項目中的使用。

Flow 安裝

這裏咱們選擇使用 yarn，當前你也可使用 npm, 若是你對 yarn不是很瞭解，建議你閱讀 煦涵說Yarn。首先咱們先初始化一個 flow 項目，安裝完編譯器，而後再安裝 flow 。

mkdir flow-project
cd flow-project
yarn init

yarn add --dev babel-cli babel-preset-flow babel-preset-es2015

項目根目錄下建立 .babelrc 文件，並增長以下內容：

{
    "presets": ["flow", "es2015"]
}

安裝 Flow:

yarn add --dev flow-bin

運行 flow：
須要在根目錄下新建一個 .flowconfig 文件，否則會報找不到該文件錯誤。

yarn run flow

yarn run v0.16.1
$ "/flow-proj/node_modules/.bin/flow" 
Launching Flow server for /flow-proj
Spawned flow server (pid=17242)
Logs will go to /private/tmp/flow/zSvue-workspacezSflow-proj.log
No errors!
✨  Done in 2.48s.

Flow 使用

咱們先在根目錄下新建src目錄，並新建一個index.js文件。同時在 package.json 文件中增長下面scripts內容，以方便咱們後期的命令行編譯。
index.js

// @flow
[1,2,3,4].map((item:number, index) => {
    return item * item;
});

package.json

"scripts": {
    "build": "yarn run flow && babel src -d lib"
}

運行 yarn run build， 沒有報錯， 會在生成lib文件目錄，index.js的 flow type 註釋會被 remove 掉，同時進行了箭頭函數到ES5的轉換。
若是我修改上面index.js的代碼：

// @flow
['1',2,3,4].map((item:number, index) => {
    return item * item;
});

運行 yarn run build，會報以下類型檢測錯誤：

yarn run v0.16.1
$ "/flow-proj/node_modules/.bin/flow" 
src/index.js:3
  3: ['1',2,3,4].map((item:number, index) => {
      ^^^ string. This type is incompatible with the expected param type of
  3: ['1',2,3,4].map((item:number, index) => {
                           ^^^^^^ number


Found 1 error
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

更多類型堅持實例再也不一一列舉，官網有不少介紹type的例子。

Flow 配置文件

上面提到沒有配置文件，會報錯，.flowconfig 文件由如下5個部分組成：

• [include] --包含的文件或者目錄
• [ignore] --忽略的文件或者目錄，支持正則匹配
• [libs] --第三方庫支持，項目根目錄下的flow-typed目錄做爲庫目錄
• [options] --默認鍵值對配置，某些選項可使用命令行方式重載
• [version] --指望使用的Flow版本

流行編輯器插件支持

• Visual Studio Code: Flow-Language-Support
• Sublime Text:Flow 和 SublimeLinter-flow

更多請參考：https://flow.org/en/docs/edit...

感謝您的閱讀

--eof--

做者[煦涵]
2017年05月20日

下面是「FED實驗室」的微信公衆號二維碼，歡迎長按、掃描關注：