摘要:資源官網(wǎng)安裝參考什么是是一個弱類型的解釋性語言,無法在編譯環(huán)節(jié)進(jìn)行靜態(tài)類型校驗,如果想也具備靜態(tài)類型檢查功能。那就得使用到由推出,官網(wǎng)是。
資源
官網(wǎng):https://flow.org/
安裝:https://flow.org/en/docs/inst...
參考:https://www.01hai.com/note/av... https://www.jianshu.com/p/868e0fe373ed
什么是FlowJavaScript是一個弱類型的解釋性語言,無法在編譯環(huán)節(jié)進(jìn)行靜態(tài)類型校驗,如果想JS也具備靜態(tài)類型檢查功能。那就得使用到Flow,Flow由Facebook推出,官網(wǎng)是 https://flow.org/。Flow與微軟的TypeScript有些類似,但TypeScript其實像是另一門新語言,而Flow可以理解為一個工具,象vue2、react等都是基于Flow開發(fā),所以很有必要了解一下Flow。
安裝Flow安裝方法:有npm和yarn兩種,yarn為facebook出品,現(xiàn)在好象更流行一些
安裝方式:全局安裝 yarn global add flow-bin
安裝過程:
$ yarn global add flow-bin yarn global v1.12.3 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "flow-bin@0.89.0" with binaries: - flow Done in 6.32s.
安裝位置:
$ yarn global bin C:UsersAdministratorAppDataLocalYarnin # 注意:npm全局安裝位置是C:UsersAdministratorAppDataRoaming pm # 注意:請將...Yarnin目錄添加到系統(tǒng)全局變量path中
cli命令說明:
$ flow --help # 查看幫助信息 # flow 命令,實際上是調(diào)用的是C:UsersAdministratorAppDataLocalYarnDataglobal ode_modulesflow-binflow-win64-v0.89.0flow.exe,不同操作系統(tǒng)調(diào)用的是不同的執(zhí)行文件配置
工作目錄:切換到項目根目錄,我的是F:youshengyouselearn-flow
配置flow: 命令是$ flow init,它會在當(dāng)前目錄下生成一個.flowconfig文件,內(nèi)容如下
[ignore] [include] [libs] [lints] [options] [strict]Flow注釋JS文件
凡加Flow注釋的文件,以下稱flow文件,flow文件就是將// @flow或 /* @flow */加到j(luò)s文件的最頂部。只有flow文件,flow進(jìn)程才會在后臺監(jiān)視這些文件,當(dāng)有類型檢查時,有錯誤它就會報錯
準(zhǔn)備第1個js文件: 內(nèi)容如下
// @flow function square(n:number): number { return n * n; } square("2")
執(zhí)行 flow check,報錯如下:
$ flow check Error ---------------------------------------------------------------------------- a.js:6:8 Cannot call `square` with `"2"` bound to `n` because string [1] is incompatible with number [2]. a.js:6:8 6| square("2") ^^^ [1] References: a.js:2:19 2| function square(n:number): number { ^^^^^^ [2] Found 1 error
將square("2")改為square(2)再flow check看下
$ flow check Found 0 errors
或者將// @flow去掉,都會提示Found 0 errors
Flow服務(wù)器啟動: flow status
停止: flow stoop
function square(n:number): number {中的類型標(biāo)注,如:number,含有這樣的js文件,事實上運行起來會報錯的,不論是在nodejs還是瀏覽器中,現(xiàn)在在nodejs中運行測試下
$ node a.js F:youshengyousedela.js:2 function square(n:number): number { ^ SyntaxError: Unexpected token : at new Script (vm.js:79:7) at createScript (vm.js:251:10) at Object.runInThisContext (vm.js:303:10) at Module._compile (internal/modules/cjs/loader.js:657:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Function.Module.runMain (internal/modules/cjs/loader.js:742:12) at startup (internal/bootstrap/node.js:283:19)
將兩個:number去掉再測試下,不會報錯。所以說flow文件是兩個過程,編程時加上類型檢查,最后成品代碼中,得將所有的類型約束要去掉,去掉這個過程肯定不能人工操作,有相應(yīng)的程序處理。目前有兩個方法去掉類型注解,一是包flow-remove-types,二是在babel中去掉
方法一:flow-remove-types官方文檔:https://flow.org/en/docs/tool...
安裝
# 如果沒有package.json文件,先生成 yarn add --dev flow-remove-types # or npm install --save-dev flow-remove-types
去類型
# 為了方便,先將a.js移到src目錄下 $ yarn run flow-remove-types src/ -d dist/ yarn run v1.12.3 $ F:youshengyousedel ode_modules.binflow-remove-types src/ -d dist/ srca.js ? dista.js Done in 0.30s.
去類型前
// @flow function square(n:number): number { return n * n; } square(2)
去類型后
// function square(n ) { return n * n; } square(2)方法二:Babel的預(yù)置babel-preset-flow
安裝
yarn add --dev babel-cli # 凡需要在命令行執(zhí)行babel,得安裝babel-cli yarn add --dev babel-preset-flow # 目的就是去除類型
提示: babel在沒有配置時,也不認(rèn)識類型,也會報錯,如沒有配置就轉(zhuǎn)碼,會報錯如下
$ ./node_modules/.bin/babel src -d dist SyntaxError: src/a.js: Unexpected token, expected , (2:17) 1 | // @flow > 2 | function square(n:number): number { | ^ 3 | return n * n; 4 | } 5 |
現(xiàn)在配置預(yù)置看下,新建配置文件 .babelrc,內(nèi)容如下
{ "presets": ["flow"] }
再執(zhí)行
$ ./node_modules/.bin/babel src -d dist srca.js -> dista.js
沒有報錯,打開dist/a.js看下,內(nèi)容如下
function square(n) { return n * n; } square(2);
類型約束全部去掉了。查看flow預(yù)置源碼,其實它只是包裝了@babel/plugin-transform-flow-strip-types這個插件而已,干活的是這個插件,打開源碼,其實比較好理解,就是刪除// @flow及類型
類型自動檢查上面使用flow check來進(jìn)行類型檢查,不是很方便,我想babel的插件來進(jìn)行類型檢查,并在編輯器如vs code中自動檢查,這樣效率就會高很多,這就要用到插件babel-plugin-typecheck,它與預(yù)置flow的功能完全不一樣,babel-plugin-typecheck是檢查代碼中的類型是否有錯,babel-preset-flow是負(fù)責(zé)刪除類型的,這樣js代碼在執(zhí)行時就好象從來沒有加過類型一樣。
在vs code中配置類型在VS Code中搜索flow,發(fā)現(xiàn)有vscode-flow-ide、Flow-Language-Support兩個插件,在這里以vscode-flow-ide為例
先安裝vscode-flow-ide
條件:
項目根目錄有配置文件.flowconfig
nodejs添加到了環(huán)境變量path中
全局或項目內(nèi)安裝了flow,推薦全局安裝flow-bin
配置(默認(rèn)就行)
VS Code左下角管理/設(shè)置/User Settings/Extensions/Flow-IDE Configurations(只有啟用后才能配置,否則找不到這項),下面是文字版,實際上在面板中就可以設(shè)置
flowide.enable: 啟用/關(guān)閉
flowide.pathToFlow: Absolute path to the Flow executable. Set it only if the default behaviour of the extension doesn"t work out for you. The extension will try first to read it from local node_modules/flow-bin or globally if not otherwise set here.
flowide.useCodeSnippetsOnFunctionSuggest - Add the function paramters when selecting a function to autocomple.
重啟vs Code,就會發(fā)現(xiàn)可以報錯了,現(xiàn)在可以去掉頂部的// @flow及傳遞不合要求的參數(shù)測試下。
如果在problem窗口有錯誤,[ts]"types" can only be used in a .ts file. 8010,請在擴(kuò)展中找到typescript,找到"javascript.validate.enable": false
總結(jié):類型檢查盡量在編輯器中設(shè)置
刪除類型盡量在babel中自動完成
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/100755.html
摘要:圍繞軟件工程效率提升進(jìn)行一系列技術(shù)內(nèi)容分享,包括國內(nèi)外持續(xù)集成持續(xù)交付,持續(xù)部署自動化測試等實踐教程工具與資源,以及一些工程師文化相關(guān)的程序員。劃分了數(shù)據(jù)庫日志安全監(jiān)控配置管理云服務(wù)等個大類,個工具。 CI Weekly 圍繞『 軟件工程效率提升』 進(jìn)行一系列技術(shù)內(nèi)容分享,包括國內(nèi)外持續(xù)集成、持續(xù)交付,持續(xù)部署、自動化測試、 DevOps 等實踐教程、工具與資源,以及一些工程師文化相關(guān)...
摘要:在的項目中加入類型檢查。當(dāng)前項目是用寫的,當(dāng)項目越來越大,由于弱類型的特性,相比這種強類型的語言而言,后期維護(hù)會越來越困難。為了解決這個問題,決定使用加入類型檢查。一了解是公布的靜態(tài)類型檢查器。中配置配置,使其支持語法。 在vue2.0的項目中加入flow類型檢查。當(dāng)前項目是用js寫的,當(dāng)項目越來越大,由于js弱類型的特性,相比ts(typescript)這種強類型的語言而言,后期維護(hù)...
摘要:深度學(xué)習(xí)在過去的幾年里取得了許多驚人的成果,均與息息相關(guān)。機(jī)器學(xué)習(xí)進(jìn)階筆記之一安裝與入門是基于進(jìn)行研發(fā)的第二代人工智能學(xué)習(xí)系統(tǒng),被廣泛用于語音識別或圖像識別等多項機(jī)器深度學(xué)習(xí)領(lǐng)域。零基礎(chǔ)入門深度學(xué)習(xí)長短時記憶網(wǎng)絡(luò)。 多圖|入門必看:萬字長文帶你輕松了解LSTM全貌 作者 | Edwin Chen編譯 | AI100第一次接觸長短期記憶神經(jīng)網(wǎng)絡(luò)(LSTM)時,我驚呆了。原來,LSTM是神...
閱讀 2727·2021-11-22 15:22
閱讀 1631·2021-11-22 14:56
閱讀 3616·2021-09-22 15:12
閱讀 2403·2021-09-02 15:41
閱讀 2122·2021-08-27 16:26
閱讀 1113·2019-08-30 15:55
閱讀 2139·2019-08-29 17:30
閱讀 665·2019-08-29 16:26