用Flow提升前端代碼健壯性

2018-4-26    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

看一段常見(jiàn)代碼： 

//例1 function foo(x) { return x + 10 }
foo('Hello!') //例2 function main(params){ //fn1函數(shù)獲取了一個(gè)數(shù)據(jù) var object = fn1(params) //fn2根據(jù)獲數(shù)據(jù)，產(chǎn)生一個(gè)結(jié)果 var result = fn2(object) return result
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    •

例2很明顯，這個(gè)過(guò)程非常的‘黑’，如果你想知道object包含什么數(shù)據(jù)的話，可以：

  1. 打印一下 console.log(object)
  2. 查看fn1的注釋，并且保佑它的注釋是正確，全面的
  3. 或結(jié)合1，2，然后仔細(xì)查看fn1的源碼，希望它不是很復(fù)雜

被上述步驟折磨完之后，終于能真正的寫(xiě)點(diǎn)代碼了，但是依舊得非常小心，因?yàn)檫@里還有另一個(gè)函數(shù)：fn2

在修改代碼的時(shí)候，得保證result這個(gè)結(jié)果沒(méi)有被影響，那么如何保證呢？

很簡(jiǎn)單，重復(fù)上面的步驟，搞清楚result包含的數(shù)據(jù)，在測(cè)試的時(shí)候確保其數(shù)據(jù)跟原先的相同。 
…

動(dòng)態(tài)類型一時(shí)爽，代碼重構(gòu)火葬場(chǎng) 
知乎傳送門:為什么說(shuō)“動(dòng)態(tài)類型一時(shí)爽，代碼重構(gòu)火葬場(chǎng)”

是時(shí)候徹底優(yōu)化這個(gè)煩人的問(wèn)題了

引入類型系統(tǒng)

其實(shí)問(wèn)題的根源就是因?yàn)閖avascript太靈活了，在代碼運(yùn)行期間幾乎可以做任何的修改，

沒(méi)有東西可以在代碼層面保證 某個(gè)變量，某個(gè)函數(shù) 跟預(yù)期的一致。

所以要加入類型系統(tǒng)來(lái)確保代碼的可靠性，在后期維護(hù)的時(shí)候同樣能夠傳達(dá)出有效的信息

Flow & TypeScript

Flow是個(gè)JavaScript的靜態(tài)類型檢查工具，由Facebook出品的開(kāi)源碼項(xiàng)目，問(wèn)世只有兩三年，是個(gè)相當(dāng)年輕的項(xiàng)目。簡(jiǎn)單來(lái)說(shuō)，它是對(duì)比TypeScript語(yǔ)言的解決方式。

會(huì)有這類解決方案，起因是JavaScript是一種弱(動(dòng)態(tài))數(shù)據(jù)類型的語(yǔ)言，弱(動(dòng)態(tài))數(shù)據(jù)類型代表在代碼中，變量或常量會(huì)自動(dòng)依照賦值變更數(shù)據(jù)類型，而且類型種類也很少，這是直譯式腳本語(yǔ)言的常見(jiàn)特性，但有可能是優(yōu)點(diǎn)也是很大的缺點(diǎn)。優(yōu)點(diǎn)是容易學(xué)習(xí)與使用，缺點(diǎn)是像開(kāi)發(fā)者經(jīng)常會(huì)因?yàn)橘x值或傳值的類型錯(cuò)誤，造成不如預(yù)期的結(jié)果。有些時(shí)候在使用框架或函數(shù)庫(kù)時(shí)，如果沒(méi)有仔細(xì)看文件，亦或是文件寫(xiě)得不清不楚，也容易造成誤用的情況。

這個(gè)缺點(diǎn)在應(yīng)用規(guī)模化時(shí)，會(huì)顯得更加嚴(yán)重。我們?cè)趫F(tuán)隊(duì)開(kāi)發(fā)協(xié)同時(shí)，一般都是通過(guò)統(tǒng)一的代碼規(guī)范，來(lái)降低這個(gè)問(wèn)題的發(fā)生，但JS語(yǔ)言本身無(wú)法有效阻止這些問(wèn)題。TypeScript這樣的強(qiáng)(靜態(tài))類型的JavaScript超集語(yǔ)言就開(kāi)始流行，用嚴(yán)格的角度，以JavaScript語(yǔ)言為基底，來(lái)重新打造另一套具有強(qiáng)(靜態(tài))類型特性的語(yǔ)言，就如同Java或C#這些語(yǔ)言一樣，這也是為什么TypeScript稱自己是企業(yè)級(jí)的開(kāi)發(fā)JavaScript解決方案。

TypeScript存在的問(wèn)題

TypeScript自然有它的市場(chǎng)，但它有一些明顯的問(wèn)題：

  • 首先是JavaScript開(kāi)發(fā)者需要再進(jìn)一步學(xué)習(xí)，內(nèi)容不少
  • 有一定陡峭的學(xué)習(xí)曲線
  • 已經(jīng)在使用的應(yīng)用代碼，需要整個(gè)改用TypeScript代碼語(yǔ)法，才能發(fā)揮完整的功用。這對(duì)很多已經(jīng)有內(nèi)部代碼庫(kù)的大型應(yīng)用開(kāi)發(fā)團(tuán)隊(duì)而言，將會(huì)是個(gè)重大的決定，因?yàn)槿绻煌嬷貥?gòu)的路走，將無(wú)法發(fā)揮強(qiáng)(靜態(tài))類型語(yǔ)言的最大效用eg:angular2

*所以許多現(xiàn)行的開(kāi)源碼函數(shù)庫(kù)或框架，并不會(huì)直接使用TypeScript作為代碼的語(yǔ)言，另一方面因?yàn)門ypeScript并非是普及到一定程度的語(yǔ)言。 
當(dāng)然TypeScript也是個(gè)活躍的開(kāi)源碼項(xiàng)目，發(fā)展到現(xiàn)在也有一段時(shí)間，它的背后有微軟公司的支持，全新打造過(guò)的Angular2框架中(由Google主導(dǎo))，也采用了TypeScript作為基礎(chǔ)的開(kāi)發(fā)語(yǔ)言*。

Flow你的新選擇

現(xiàn)在，Flow提供了另一個(gè)新的選項(xiàng)，它是一種強(qiáng)(靜態(tài))類型的輔助檢查工具。Flow的功能是讓現(xiàn)有的JavaScript語(yǔ)法可以事先作類型的聲明(定義)，在開(kāi)發(fā)過(guò)程中進(jìn)行自動(dòng)檢查，當(dāng)然在最后編譯時(shí)，一樣可以用babel工具來(lái)移除這些標(biāo)記。

相較于TypeScript是另外重新制定一套語(yǔ)言，最后再經(jīng)過(guò)編譯為JavaScript代碼來(lái)運(yùn)行。Flow走的則是非強(qiáng)制與非侵入性的路線。

Flow的優(yōu)點(diǎn)

  • 輕且易學(xué)易用 
    它的學(xué)習(xí)曲線沒(méi)有TypeScript來(lái)得高，雖然內(nèi)容也很多，但半天學(xué)個(gè)大概，就可以漸進(jìn)式地開(kāi)始使用
  • Flow從頭到尾只是個(gè)檢查工具 
    不是新的程序語(yǔ)言或超集語(yǔ)言，所以它可以與各種現(xiàn)有的JavaScript代碼兼容，如果你哪天不想用了，就去除掉標(biāo)記就是回到原來(lái)的代碼，沒(méi)什么負(fù)擔(dān)

so

選擇flow.js工具而不選擇TypeScript強(qiáng)類型語(yǔ)言的原因顯而易見(jiàn)？ 
flow.js對(duì)工程的侵入性很小，無(wú)需大量的額外工作就能使用起來(lái)

從一個(gè)小例子演示

這種類型不符的情況在代碼中非常容易發(fā)生，例如上面的例1: 

function foo(x) { return x + 10 }

foo('Hello!')
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

x這個(gè)傳參，我們?cè)诤瘮?shù)聲明時(shí)希望它是個(gè)數(shù)字類型，但最后使用調(diào)用函數(shù)時(shí)則用了字符串類型。最后的結(jié)果會(huì)是什么嗎？ “Hello!10”，這是因?yàn)榧犹?hào)(+)在JavaScript語(yǔ)言中，除了作為數(shù)字的加運(yùn)算外，也可以當(dāng)作字符串的連接運(yùn)算。想當(dāng)然這并不是我們想要的結(jié)果。

聰明如你應(yīng)該會(huì)想要用類型來(lái)當(dāng)傳參的識(shí)別名，容易一眼看出傳參要的是什么類型，像下面這樣: 

function foo(number) { return number + 10 }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •
  • 如果在復(fù)合類型的情況，例如這個(gè)傳參的類型可以是數(shù)字類型也可以是布爾類型，你又要如何寫(xiě)得清楚？
  • 如果是個(gè)復(fù)雜的對(duì)象類型時(shí)，結(jié)構(gòu)又該如何先確定好？
  • 另外還有函數(shù)的返回類型又該如何來(lái)寫(xiě)？

利用Flow類型的定義方式，來(lái)解決這個(gè)小案例的問(wèn)題，可以改寫(xiě)為像下面的代碼: 

// @flow function foo(x: number): number { return x + 10 }

foo('hi')
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    •

當(dāng)使用非數(shù)字類型的值作為傳入值時(shí)，就會(huì)出現(xiàn)由Flow工具發(fā)出的警告消息，像下面這樣:

[flow] Cannot call foo with 'hi' bound to x because string 1 is incompatible with number 2. (a.getting-start.js:6:5)

如果是要允許多種類型也是很容易可以加標(biāo)記的，假使這個(gè)函數(shù)可以使用布爾與數(shù)字類型，但返回可以是數(shù)字或字符串，就像下面這樣修改過(guò): 

// @flow function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' }

foo(1)
foo(true)
foo(null) // 這一行有類型錯(cuò)誤消息
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    •

在多人協(xié)同開(kāi)發(fā)某個(gè)有規(guī)模的JavaScript應(yīng)用時(shí)，這種類型的輸出輸入問(wèn)題就會(huì)很常遇見(jiàn)。如果利用Flow工具的檢查，可以避免掉許多不必要的類型問(wèn)題。

真實(shí)案例

可能你會(huì)認(rèn)為Flow工具只能運(yùn)用在小型代碼中，其實(shí)不然，Vue源碼中大量使用flowjs中類型檢測(cè)： 
此處輸入圖片的描述

Flow使用

此處輸入圖片的描述 
1. flow init 
2. // @flow 或 /* @flow */ 
3. IDE插件 或 flow check 
在Visual Studio Code中因?yàn)樗鼉?nèi)建TypeScript與JavaScript的檢查功能，如果要使用Flow工具來(lái)作類型檢查，需要在用戶設(shè)置中，加上下面這行設(shè)置值以免沖突:

“javascript.validate.enable”: false

4 . babel插件在編譯時(shí)就會(huì)一并轉(zhuǎn)換Flow標(biāo)記 

{
  "plugins": [ "transform-flow-strip-types" ] }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

Flow支持的數(shù)據(jù)類型

Flow支持原始數(shù)據(jù)類型，如下面的列表:

  • boolean
  • number
  • string
  • null
  • void

類型別名&常見(jiàn)語(yǔ)法 

// @flow export type Test = {
  titleOne?: string,
  titleTwo: ?string
} var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" //any export type NavigationGestureDirection = 'horizontal' | 'vertical';

type T = Array<string> var x: T = []
x["Hi"] = 2 //有Flow警告 type TT = Array<Test> var xx:TT = []
xx = [{titleOne: '1',
  titleTwo: false}]

type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};

let val:MyObject = {foo:2,bar:false,baz:'444'}; var val1: MyObject = {foo:2,bar:false,baz:null}; var val2: MyObject = {foo:2,bar:false}; function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} class Foo { constructor(val: MyObject) { /* ... */ } }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    •

React中的應(yīng)用

如果你在React class里面使用了React.PropTypes規(guī)范，你可以對(duì)JSX上的attributes做靜態(tài)類型檢查： 

var Hello = React.createClass ({
  propTypes: {
    name: React.PropTypes.string.isRequired
  } ... });
//<Hello/> //Flow就會(huì)發(fā)現(xiàn) 缺少屬性的錯(cuò)誤
//<Hello name={42}/>//屬性類型的錯(cuò)誤
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

    


import * as React from 'react'; type Props = {
  foo: number,
  bar?: string,
}; function MyComponent(props: Props) {
  props.doesNotExist; // Error! You did not define a `doesNotExist` prop. return <div>{props.bar}</div>;
}

<MyComponent foo={42} />
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •

更多關(guān)于支持React的細(xì)節(jié) 請(qǐng)移步 https://flow.org/en/docs/react/components/

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔