Flow入門

介紹

一個 JAVASCRIPT 靜態類型檢測器

• Flow 使用類型接口查找錯誤，甚至不需要任何類型聲明。 它也能夠準確地跟蹤變量的類型，就像運行時那樣
• Flow 專為 JavaScript 程序員設計。 他能夠理解常用 JS 方言和極具動態的特性
• Flow 能立刻檢測代碼變化，在開發 JS 時提供快速不斷地反饋

安裝

在項目中安裝flow npm i -D flow-bin

在項目中安裝babel插件 npm i -D babel-plugin-transform-flow-strip-types

在編輯器中安裝flow插件，各個商店應該會有各自對應的插件

全局安裝flow-typenpm i -g flow-typed，flow-typed是什么見下面?

使用

在.babelrc添加插件

{"presets": ["next/babel"],"plugins": ["transform-decorators-legacy","transform-flow-strip-types"] }

在根目錄中添加.flowconfig文件

[ignore] <PROJECT_ROOT>/node_modules/.* <PROJECT_ROOT>/coverage/.* <PROJECT_ROOT>/.next/.*[options] module.file_ext=.js module.file_ext=.jsx module.file_ext=.json module.file_ext=.css module.file_ext=.scss module.file_ext=.less module.name_mapper.extension='css' -> 'empty/object' module.name_mapper.extension='scss' -> 'empty/object' module.name_mapper.extension='less' -> 'empty/object'esproposal.decorators=ignoremodule.name_mapper='^@src\/\(.*\)$' -> '<PROJECT_ROOT>/\1'

這是我項目中的配置文件，主要做了幾件事

忽略一些不需要檢查的文件夾

指定需要檢查文件的后綴名

將樣式文件解析成空對象

運行使用decorator語法

指定模塊解析方式，因為我的模塊路徑都是@src開頭的

在根目錄中添加flow-typed文件夾

這個文件夾是用來存放第三方或者你自己編寫的定義文件的地方，在flow運行的時候會去讀文件夾里所有文件的定義，當然你也可以通過配置文件修改默認文件夾的名字。
比如新建一個flow-typed/global.js文件,來定義一些全局變量

declare var document: Object;declare var window: Object;

使用flow檢查文件

新建一個文件src/index.js

// @flow function concat(a: string, b: string): string {return a + b; }concat("foo", "bar"); // Works! // $ExpectError concat(true, false); // Error!

通過在文件頭部添加// @flow來告訴flow這是個需要檢查的文件，可以看到flow是個很自由的工具，尤其是對已經開發很久的項目來說，可以一點點使用flow，而不必對整個項目進行改造。
一但對參數指定好類型后，flow就可以開始正常工作了，如果需要flow檢查又沒有定義類型，flow也會提示你去定義。
對于如何去定義各種不同的變量、函數，這些在文檔中會有更加詳細的介紹，這里就不細展開了。

類型的模塊化

怎么去暴露已經定義好的類型給其他文件使用呢？

• 新建一個暴露js模塊，類型混合的文件a.js

export type A = {name: string,value: number }export default {name: 'a',value: 100 }

• 新建b.js引用a.js

import a from './a.js' import type { A } from './a.js'const b: A = {...a,name: 'b' }export default b

使用第三方庫

// @flow import _ from 'lodash' // Error

flow會報找不到該模塊，這個時候需要我們去下載lodash的定義文件，用flow-typed 可以很方便的管理這些第三方庫的定義文件

flow-typed

一個查找安裝第三方庫定義文件的管理工具

• 查找

flow-typed search lodash

Found definitions: ╔════════╤═════════════════╤═════════════════════╗ ║ Name │ Package Version │ Flow Version ║ ╟────────┼─────────────────┼─────────────────────╢ ║ lodash │ v4.x.x │ >=v0.63.x ║ ╟────────┼─────────────────┼─────────────────────╢ ║ lodash │ v4.x.x │ >=v0.55.x <=v0.62.x ║ ╟────────┼─────────────────┼─────────────────────╢ ║ lodash │ v4.x.x │ >=v0.47.x <=v0.54.x ║ ╟────────┼─────────────────┼─────────────────────╢ ║ lodash │ v4.x.x │ >=v0.38.x <=v0.46.x ║ ╟────────┼─────────────────┼─────────────────────╢ ║ lodash │ v4.x.x │ >=v0.28.x <=v0.37.x ║ ╚════════╧═════════════════╧═════════════════════╝

• 選一個版本安裝flow-typed install lodash@v4.x.x，下載的文件會默認保存在flow-typed/npm文件夾下，并且在flow運行的時候自動加載，這個時候就能解決剛剛’模塊找不到‘的報錯
• 如果搜索不到對應的定義文件怎么辦？我們可以自己手動新建。

如果我們從npm上下了一個clipboard庫使用

添加對應的定義，新建文件flow-typed/npm/clipboard.js

declare module 'clipboard' {declare export default any }

這里，我很粗暴的把這個模塊定義成了any類型，當然如果你對模塊熟悉或者想定義的更詳細的話，也可以把這個模塊的各個屬性定義補充完整。具體怎么定義，可以查看文檔，這里也不展開了。

常見問題

引入css文件報錯

我們可以下載一個空模塊npm i -D empty，然后在配置文件中，把所有的樣式文件指向該模塊下的空對象

[options] module.name_mapper.extension='css' -> 'empty/object' module.name_mapper.extension='scss' -> 'empty/object' module.name_mapper.extension='less' -> 'empty/object'

使用window、document等全局對象報錯

我們可以在flow-typed/xxx.js中，聲明這些全局對象的類型

declare var document: Object;declare var window: Object;declare var process: Object;declare function fetch(url: string, option?: any): Promise<any>;

使用fetch報錯，見上?

使用decorator語法報錯

在配置文件中添加

[options] esproposal.decorators=ignore

很不幸的是，即使忽略decorator語法報錯，在我們暴露一些經過修飾器修飾的模塊給其他文件使用的時候，也會遇到報錯的問題，根本原因是flow不支持decorator語法的類型檢查，所以除非這個模塊不會被其他文件使用，可以使用decorator語法，不然最好的選擇就是不用decorator語法

最后

感謝閱讀，有錯誤希望能及時指正

總結

以上是生活随笔為你收集整理的静态类型检查—Flow入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。