看一段常見代碼：
function foo(x) { return x + 10 }
foo('Hello!') function main(params){ var object = fn1(params) var result = fn2(object) return result
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
例2很明顯，這個過程非常的‘黑’，如果你想知道object包含什么數(shù)據(jù)的話，可以：
-
打印一下 console.log(object)
-
查看fn1的注釋，并且保佑它的注釋是正確，全面的
-
或結(jié)合1，2，然后仔細查看fn1的源碼，希望它不是很復雜
被上述步驟折磨完之后，終于能真正的寫點代碼了，但是依舊得非常小心，因為這里還有另一個函數(shù)：fn2
在修改代碼的時候，得保證result這個結(jié)果沒有被影響，那么如何保證呢？
很簡單，重復上面的步驟，搞清楚result包含的數(shù)據(jù)，在測試的時候確保其數(shù)據(jù)跟原先的相同。
…
動態(tài)類型一時爽，代碼重構(gòu)火葬場
知乎傳送門:為什么說“動態(tài)類型一時爽，代碼重構(gòu)火葬場”
是時候徹底優(yōu)化這個煩人的問題了
引入類型系統(tǒng)
其實問題的根源就是因為javascript太靈活了，在代碼運行期間幾乎可以做任何的修改，
沒有東西可以在代碼層面保證 某個變量，某個函數(shù) 跟預(yù)期的一致。
所以要加入類型系統(tǒng)來確保代碼的可靠性，在后期維護的時候同樣能夠傳達出有效的信息
Flow & TypeScript
Flow是個JavaScript的靜態(tài)類型檢查工具，由Facebook出品的開源碼項目，問世只有兩三年，是個相當年輕的項目。簡單來說，它是對比TypeScript語言的解決方式。
會有這類解決方案，起因是JavaScript是一種弱(動態(tài))數(shù)據(jù)類型的語言，弱(動態(tài))數(shù)據(jù)類型代表在代碼中，變量或常量會自動依照賦值變更數(shù)據(jù)類型，而且類型種類也很少，這是直譯式腳本語言的常見特性，但有可能是優(yōu)點也是很大的缺點。優(yōu)點是容易學習與使用，缺點是像開發(fā)者經(jīng)常會因為賦值或傳值的類型錯誤，造成不如預(yù)期的結(jié)果。有些時候在使用框架或函數(shù)庫時，如果沒有仔細看文件，亦或是文件寫得不清不楚，也容易造成誤用的情況。
這個缺點在應(yīng)用規(guī)?；瘯r，會顯得更加嚴重。我們在團隊開發(fā)協(xié)同時，一般都是通過統(tǒng)一的代碼規(guī)范，來降低這個問題的發(fā)生，但JS語言本身無法有效阻止這些問題。TypeScript這樣的強(靜態(tài))類型的JavaScript超集語言就開始流行，用嚴格的角度，以JavaScript語言為基底，來重新打造另一套具有強(靜態(tài))類型特性的語言，就如同Java或C#這些語言一樣，這也是為什么TypeScript稱自己是企業(yè)級的開發(fā)JavaScript解決方案。
TypeScript存在的問題
TypeScript自然有它的市場，但它有一些明顯的問題：
-
首先是JavaScript開發(fā)者需要再進一步學習，內(nèi)容不少
-
有一定陡峭的學習曲線
-
已經(jīng)在使用的應(yīng)用代碼，需要整個改用TypeScript代碼語法，才能發(fā)揮完整的功用。這對很多已經(jīng)有內(nèi)部代碼庫的大型應(yīng)用開發(fā)團隊而言，將會是個重大的決定，因為如果不往全面重構(gòu)的路走，將無法發(fā)揮強(靜態(tài))類型語言的最大效用eg:angular2
*所以許多現(xiàn)行的開源碼函數(shù)庫或框架，并不會直接使用TypeScript作為代碼的語言，另一方面因為TypeScript并非是普及到一定程度的語言。
當然TypeScript也是個活躍的開源碼項目，發(fā)展到現(xiàn)在也有一段時間，它的背后有微軟公司的支持，全新打造過的Angular2框架中(由Google主導)，也采用了TypeScript作為基礎(chǔ)的開發(fā)語言*。
Flow你的新選擇
現(xiàn)在，Flow提供了另一個新的選項，它是一種強(靜態(tài))類型的輔助檢查工具。Flow的功能是讓現(xiàn)有的JavaScript語法可以事先作類型的聲明(定義)，在開發(fā)過程中進行自動檢查，當然在最后編譯時，一樣可以用babel工具來移除這些標記。
相較于TypeScript是另外重新制定一套語言，最后再經(jīng)過編譯為JavaScript代碼來運行。Flow走的則是非強制與非侵入性的路線。
Flow的優(yōu)點
-
輕且易學易用
它的學習曲線沒有TypeScript來得高，雖然內(nèi)容也很多，但半天學個大概，就可以漸進式地開始使用
-
Flow從頭到尾只是個
檢查工具
不是新的程序語言或超集語言，所以它可以與各種現(xiàn)有的JavaScript代碼兼容，如果你哪天不想用了，就去除掉標記就是回到原來的代碼，沒什么負擔
so
選擇flow.js工具而不選擇TypeScript強類型語言的原因顯而易見？
flow.js對工程的侵入性很小，無需大量的額外工作就能使用起來
從一個小例子演示
這種類型不符的情況在代碼中非常容易發(fā)生，例如上面的例1:
function foo(x) { return x + 10 }
foo('Hello!')
x這個傳參，我們在函數(shù)聲明時希望它是個數(shù)字類型，但最后使用調(diào)用函數(shù)時則用了字符串類型。最后的結(jié)果會是什么嗎？ “Hello!10”，這是因為加號(+)在JavaScript語言中，除了作為數(shù)字的加運算外，也可以當作字符串的連接運算。想當然這并不是我們想要的結(jié)果。
聰明如你應(yīng)該會想要用類型來當傳參的識別名，容易一眼看出傳參要的是什么類型，像下面這樣:
function foo(number) { return number + 10 }
-
如果在復合類型的情況，例如這個傳參的類型可以是數(shù)字類型也可以是布爾類型，你又要如何寫得清楚？
-
如果是個復雜的對象類型時，結(jié)構(gòu)又該如何先確定好？
-
另外還有函數(shù)的返回類型又該如何來寫？
利用Flow類型的定義方式，來解決這個小案例的問題，可以改寫為像下面的代碼:
function foo(x: number): number { return x + 10 }
foo('hi')
當使用非數(shù)字類型的值作為傳入值時，就會出現(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)
如果是要允許多種類型也是很容易可以加標記的，假使這個函數(shù)可以使用布爾與數(shù)字類型，但返回可以是數(shù)字或字符串，就像下面這樣修改過:
function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' }
foo(1)
foo(true)
foo(null)
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
在多人協(xié)同開發(fā)某個有規(guī)模的JavaScript應(yīng)用時，這種類型的輸出輸入問題就會很常遇見。如果利用Flow工具的檢查，可以避免掉許多不必要的類型問題。
真實案例
可能你會認為Flow工具只能運用在小型代碼中，其實不然，Vue源碼中大量使用flowjs中類型檢測：
Flow使用
1. flow init
2. // @flow 或 /* @flow */
3. IDE插件 或 flow check
在Visual Studio Code中因為它內(nèi)建TypeScript與JavaScript的檢查功能，如果要使用Flow工具來作類型檢查，需要在用戶設(shè)置中，加上下面這行設(shè)置值以免沖突:
“javascript.validate.enable”: false
4 . babel插件在編譯時就會一并轉(zhuǎn)換Flow標記
{
"plugins": [ "transform-flow-strip-types" ] }
Flow支持的數(shù)據(jù)類型
Flow支持原始數(shù)據(jù)類型，如下面的列表:
-
boolean
-
number
-
string
-
null
-
void
類型別名&常見語法
export type Test = {
titleOne?: string,
titleTwo: ?string
} var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" export type NavigationGestureDirection = 'horizontal' | 'vertical';
type T = Array<string> var x: T = []
x["Hi"] = 2 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ī)范，你可以對JSX上的attributes做靜態(tài)類型檢查：
var Hello = React.createClass ({
propTypes: {
name: React.PropTypes.string.isRequired
} ... });
//<Hello/> //Flow就會發(fā)現(xiàn) 缺少屬性的錯誤
//<Hello name={42}/>//屬性類型的錯誤
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的細節(jié) 請移步 https://flow.org/en/docs/react/components/
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
