使用flow來規範javascript的變數類型

眾所周知， js是弱類型的語言，由此有了很多的優點，也出現了大量由此導致的錯誤，難以定位。當然有類似於ts之類的語法糖來解決此問題，ts因為是從c#演變而來的，所以入門有一定的門檻，所以我們來一下flow這個更輕巧的工具。

先來看一下flow在vs code中的表現效果:

跟ts的提示類似，它會實時檢測所有的包含flow註釋的文件，在vscode中需要安裝Flow Language Support插件.

如何安裝

安裝過程可以使用yarn和npm安裝，推薦使用yarn，因為安裝起來會更快。

yarn add --dev @babel/core @babel/cli @babel/preset-flow

　然後在.babelrc中添加此插件

{
  "presets": ["@babel/preset-flow"]
}

　添加flow-bin的依賴

yarn add --dev flow-bin

　執行flow:

yarn run flow

　　執行成功後，會在後臺啟動一個進程進行監聽，如果你已經安裝了vscode的插件的話，可以忽略這一步，插件會自動啟用flow.

　使用強類型

做完上面這些後，你就可以在你的js文件中使用強類型來約束你的代碼了，在需要使用flow的文件頭部添加 // @flow 

1 // @flow
2 
3 function foo(x: ?number): string {
4   if (x) {
5     return x;
6   }
7   return "default string";
8 }

然後運行 yarn run flow 　你就可以看到如下的輸出

test.js:5
  5:     return x;
                ^ number. This type is incompatible with the expected return type of
  3: function foo(x: ?number): string {
                               ^^^^^^ string

如果你使用vscode的插件，就會在保存的時候自動提示這些錯誤出來，如第一張示例圖片那樣。

相關資料：

flow官網：https://flow.org/en/

線上嘗試：https://flow.org/try/