1.什么是flow
Flow是javascript代碼的靜態(tài)類型接觸的一個(gè)工具。它可以使你的代碼更有效率层扶、更可控镜会、更大規(guī)模的開發(fā)。
Flow通過(guò)靜態(tài)類型檢查到嗎是否存在類型錯(cuò)誤桶至，比如: test
// @flow
function square(n:unmber): number {
return n * n;
}
square("2")// Error!
flow 非常的只能匾旭，如果您的代碼不需要類型季率，他也會(huì)自動(dòng)幫你判斷描沟。
// @flow
function square(n) {
return n * n; // Error! cannot perform aritmetic operation because string [1] is not a number
}
square("2");
2.類型注釋
添加類型注釋是flow交互中的一個(gè)重要的部分吏廉。FLow具有很強(qiáng)的類型判斷能力。但是有些時(shí)候也需要添加類型注釋史辙。類型注釋是什么呢聊倔，繼續(xù)往下看。
如下是一個(gè)是一個(gè)相加的函數(shù)：
function concat(a, b) {
return a + b;
}
我們既可以傳字符串的參數(shù)進(jìn)入：
concat("a", "b");
也可以傳數(shù)字進(jìn)去相加：
concat(1, 2);
但是如果你想制定一個(gè)特定的類型的話见妒，你就需要添加類型注釋甸陌。如下：
function concat(a: string, b: string) {
return a + b;
}
concat("a", "b");
concat(1, 2); // Error! cannot call 'cancat' with '2' bound to 'b' beacuse number is incompatible with string
// 意思是不能用數(shù)字綁定參數(shù)a或者b钱豁，就是說(shuō)不能傳除了字符串之外的參數(shù)。
3.原始類型
JavaScript有很多不同的原始類型
- Booleans
- Strings
- Numbers
- null
- undefined (void in Flow types)
- Symbols (new in ECMAScript 2015, not yet supported in Flow)
需要注意的是卵酪，我們?cè)賔low中的類型注釋需要是小寫的凛澎。
Booleans
true/false 在javascript中是Booleans 的值估蹄，flow中也一樣臭蚁。
// @flow
function acceptsBoolean(value: boolean) {
// ...
}
acceptsBoolean(true); // Works!
acceptsBoolean(false); // Works!
acceptsBoolean("foo"); // Error!
js 中還可以隱式的將其他值轉(zhuǎn)為booleans值
if (42) {} // 42 => true
if ("") {} // "" => false
下面代碼中的函數(shù)中，在flow中是不支持隱式轉(zhuǎn)換的冷尉，必須將其轉(zhuǎn)換為Boolean值傳入
// @flow
function acceptsBoolean(value: boolean) {
// ...
}
acceptsBoolean(0); // Error!
acceptsBoolean(Boolean(0)); // Works!
acceptsBoolean(!!0); // Works!
Boolean 和 boolean值 是不同的類型
boolean值是一個(gè)與true或false類型的字面量，或者是一個(gè)表達(dá)式的結(jié)果如 a=b
Boolean是一個(gè)構(gòu)造函數(shù)
Numbers
js的數(shù)字只有一種類型Number系枪，不像其他語(yǔ)言一樣有int float double型等雀哨。
// @flow
function acceptsNumber(value: number) {
// ...
}
acceptsNumber(42); // Works!
acceptsNumber(3.14); // Works!
acceptsNumber(NaN); // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo"); // Error!
需要注意的就是 number 和 Number 也不一樣
Strings
需要注意的就是隱式轉(zhuǎn)換：
"foo" + 42; // "foo42"
"foo" + {}; // "foo[object Object]"
flow 只接受字符串和數(shù)字連接的字符串。
// @flow
"foo" + "foo"; // Works!
"foo" + 42; // Works!
"foo" + {}; // Error!
"foo" + []; // Error!
如果想傳入字符串和對(duì)象連接的字符串私爷，必須是顯式的轉(zhuǎn)換才行雾棺，如下：
// @flow
"foo" + String({}); // Works!
"foo" + [].toString(); // Works!
"" + JSON.stringify({}) // Works!
null and void
js中具有null和undefined, flow中對(duì)他們兩個(gè)進(jìn)行了單獨(dú)處理
// @flow
function acceptsNull(value: null) {
/* ... */
}
function acceptsUndefined(value: void) {
/* ... */
}
acceptsNull(null); // Works!
acceptsNull(undefined); // Error!
acceptsUndefined(null); // Error!
acceptsUndefined(undefined); // Works!
Maybe types（判斷類型）
在前面加一個(gè)問(wèn)號(hào)創(chuàng)建類型。 ?string ?number
除了判斷的類型之外衬浑，也可以是null 或者 void
// @flow
function acceptsMaybeString(value: ?string) {
// ...
}
acceptsMaybeString("bar"); // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null); // Works!
acceptsMaybeString(); // Works!
可選對(duì)象屬性
直接上例子了捌浩，看完例子相信大家都明白了
// @flow
function acceptsObject(value: { foo?: string }) {
// ...
}
acceptsObject({ foo: "bar" }); // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null }); // Error!
acceptsObject({}); // Works!
可選函數(shù)參數(shù)
// @flow
function acceptsOptionalString(value?: string) {
// ...
}
acceptsOptionalString("bar"); // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null); // Error!
acceptsOptionalString(); // Works!
具有默認(rèn)值的函數(shù)參數(shù)
// @flow
function acceptsOptionalString(value: string = "foo") {
// ...
}
acceptsOptionalString("bar"); // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null); // Error!
acceptsOptionalString(); // Works!
