js型別檢查工具flow的基本使用
阿新 • • 發佈:2019-01-24
Flow是JavaScript程式碼的靜態型別檢查器。它可以幫助您提高工作效率。讓您的程式碼更快,更智慧,更自信,更大規模。
Flow的使用
Flow 安裝
安裝Flow
npm i flow-bin -D
安裝Babel
npm i babel-cli babel-preset-flow
Flow 的命令列工具的使用
在package.json中新增相應的scripts執行flow命令, 轉換src/目錄下的js程式碼, 並且輸出到lib/目錄下
{ "name": "my-project", "main": "lib/index.js", "scripts": { "build": "babel src/ -d lib/", "flow": "flow", "init": "flow init" } }
新建.babelrc
檔案, babel配置檔案
{
"presets": [
"flow"
]
}
先執行初始化命令, 專案目錄會生產一個.flowconfig檔案, 可以配置那些需要轉換, 那些不需要
npm run init
使用npm執行flow命令
npm flow
命令列工具很少使用,因為便捷程度較低,最常見的使用方式為IDE外掛(VSCode等)
VSCode外掛名稱為:Flow Language Support
為程式碼新增Flow型別
在程式碼中新增型別的方式有兩種:
註釋型:這種方式不會對程式碼產生任何影響,JS程式碼可以正常執行,但是程式碼結構會因為註釋內容的存在降低可讀性。
程式碼型(推薦):這種方式會改變JS程式碼結構,需要配合babel使用才可正常執行
註釋型演示:
// @flow
function test(a /*: number*/, b /*: number*/) /*: number*/{
return a + b;
}
// 宣告test函式的a,b引數型別事number, 返回值也是number
程式碼型演示:
// @flow
function test(a: number, b: number): number{
return a + b;
}
// 宣告test函式的a,b引數型別事number, 返回值也是number
不論哪種形式,都需要為檔案新增 // @flow
標記, 這樣後臺的flow程序才會對該檔案進行型別檢查
// @flow 標記不能少
標記還可以書寫為
/* @flow */
如果不想給所有檔案都新增標記,又想flow對檔案進行型別檢查則在啟動flow時需要使用命令
flowchat check --all
Flow中的型別
型別 | 說明 |
---|---|
number | 數字、NaN、Infinity都是number型別的資料 |
string | 字串 |
null | 只有null是null型別的 |
void | undefined在flow中的型別就是void |
Array | 陣列型別,定義的時候需要使用Array這種形式, T為指定的型別,說的是特定型別的資料組成的陣列 |
Object | 物件型別,由於物件比較自由,所以規定物件型別的時候有多種寫法 |
any | 表示任意型別,這個型別儘量少用,但有時又很有用! |
Functions | 函式型別 |
Maybe | Maybe型別允許我們宣告一個包含null和undefined兩個潛在型別的值。 |
或操作 | 或操作可以設定一個變數為多種可能的型別 型別1 |
型別推斷 | flow會嘗試自行推斷某個資料的型別 |