Flow是facebook出品的JavaScript靜態(tài)類型檢查工具殿漠。
由于JavaScript是動態(tài)類型語言垦藏,它的靈活性也會造成一些代碼隱患推汽,使用Flow可以在編譯期盡早發(fā)現(xiàn)由類型錯誤引起的bug羽莺,這種方式非常有利于大型項目源碼的開發(fā)和維護班利,
1.Flow工作方式
類型推斷:通過變量的使用上下文來推斷,然后根據(jù)這些推斷來判斷類型。
類型注釋:事先注釋數(shù)據(jù)類型膳算,F(xiàn)low會基于注釋來判斷座硕。
2.Flow安裝
$mkdir flowtest
$npm install --g flow-bin
$flow init //初始化,創(chuàng)建一個.flowconfig文檔
$flow
3.使用
// @flow
function square(n: number): number {
return n * n;
}
square("2"); // Error!
$flow
(1)原始數(shù)據(jù)類型
// @flow
function concat(a: string, b: string) {
return a + b;
}
concat("1", 2); // Error!
// @flow
function method(x: number, y: string, z: boolean) {
// ...
}
method(3.14, "hello", true);//No errors!
// @flow
function method(x: Number, y: String, z: Boolean) {
// ...
}
method(new Number("111"), new String("world"), new Boolean(false));//No errors!
(2)類和對象
Object
// @flow
var obj1: { foo: boolean } = { foo: true };
var obj2: {
foo: number,
bar: boolean,
baz: string,
} = {
foo: 1,
bar: true,
baz: 'three',
};//No errors!
//@flow
class Bar {
x: string; // x 是字符串
y: string | number; // y 可以是字符串或者數(shù)字
z: boolean;
constructor(x: string, y: string | number) {
this.x = x
this.y = y
this.z = false
}
}
var bar: Bar = new Bar('hello', 4)
var obj: { a: string, b: number, c: Array<string>, d: Bar } = {
a: 'hello',
b: 11,
c: ['hello', 'world'],
d: new Bar('hello', 3)
}
//No errors!
Array
//@flow
let arr: Array<number> = [1, 2, 3];
(3)自定義類型
Flow 提出了一個 libdef 的概念涕蜂,可以用來識別這些第三方庫或者是自定義類型华匾。例如vuejs的對flow的使用。vue源碼下flow文件夾机隙。