flow
靜態(tài)類型檢查工具，給javaScript提供靜態(tài)類型檢查能力，為其增加了一個(gè)編譯的過程
開始
安裝babel和flow
babel和flow安裝后，yarn run flow init，生成.flowconfig文件
基本使用
// 需要給文件添加@flow標(biāo)記贩幻，否則flow不會(huì)對(duì)文件進(jìn)行類型檢測
// @flow
var a /*: number*/ = 10;
var a: number = 10;
a = "abc";
console.log(a);
function sum(a: number, b: number) {
return a + b;
}
sum(1, 2);
sum("123", "456")
在pacakge.json，scripts中添加"flow": "flow"
yarn run flow來檢測有無錯(cuò)誤
yarn run build將文件打包到lib文件夾下两嘴，此時(shí)打包好的文件已經(jīng)經(jīng)過babel的處理丛楚，可以正常運(yùn)行
數(shù)據(jù)類型
概覽圖
// @flow
// number：數(shù)字、NaN憔辫、Infinity
let a: number = 1
let b:number = NaN
let c:number = Infinity
// string：字符串
let str: string = 'aaa'
// boolean
// void - js中undefined
// null - js中null
// Array：必須指定元素類型趣些，不想指定用any
let arr1: Array<number> = [1, 2]
let arr2: Array<any> = [1, '2']
// any
let name: any = 123
name = '123'
簡化錯(cuò)誤處理邏輯
求和函數(shù)
不用flow的錯(cuò)誤處理邏輯如下
使用
flow的完整代碼如下
// @flow
function sum(arr: Array<number>) {
return arr.reduce((total, prev) => {
return total + prev
})
}
sum([1, 2, 3])
函數(shù)類型
// @flow
function test(a: number, b: number): number {
return a + b
}
// 將變量聲明為函數(shù)類型
let func: (a: number, b: number) => number = test
maybe類型
//@flow
// maybe：給數(shù)據(jù)添加了null和void
function test(a: ?number) {
a = a || 1
console.log(a)
}
test(10)
test()
或操作
//@flow
let a: number|string = 10
a = 'ccc'
類型推斷
//@flow
function test(a: number, b: number) {
return a + b
}
let c:string = test(2, 3)
會(huì)報(bào)錯(cuò)，因?yàn)轭愋屯茢?code>c不可能是string
對(duì)象類型
//@flow
function hi(obj: {sayHello: () => void, name: string}) {
obj.sayHello()
}
let singer = {
name: 'jayChou',
sayHello () {
console.log('hi~~~')
}
}
hi(singer)
