<s id="0oyqk"></s>
  • <option id="0oyqk"><optgroup id="0oyqk"></optgroup></option>
  • <source id="0oyqk"><bdo id="0oyqk"></bdo></source>
  • 使用flow來規范javascript的變量類型

     更新時間:2019-09-14 22:01:47   作者:佚名   我要評論(0)

    眾所周知, js是弱類型的語言,由此有了很多的優點,也出現了大量由此導致的錯誤,難以定位。當然有類似于ts之類的語法糖來解決此問題,ts因為是從c#演變而來

    眾所周知, 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

    // @flow
    function foo(x: ?number): string {
     if (x) {
      return x;
     }
     return "default string";
    }

    然后運行 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/

    總結

    以上所述是小編給大家介紹的使用flow來規范javascript的變量類型,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
    如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

    您可能感興趣的文章:

    • Angularjs上傳文件組件flowjs功能
    • Flow之一個新的Javascript靜態類型檢查器
    • JavaScript中的Repaint和Reflow用法詳解
    • JavaScript靜態類型檢查工具FLOW簡介
    • 有關javascript的性能優化 (repaint和reflow)
    • js中判斷變量類型函數typeof的用法總結
    • javascript中對變量類型的判斷方法
    • js判斷undefined變量類型使用typeof
    • Js檢查變量類型的代碼()
    • javascript 得到變量類型的函數
    • js 變量類型轉換常用函數與代碼[比較全]

    相關文章

    最新評論

    种子磁力搜索器