flow
静态类型检查工具，给javaScript提供静态类型检查能力，为其增加了一个编译的过程
开始
安装babel和flow
babel和flow安装后，yarn run flow init，生成.flowconfig文件
基本使用
// 需要给文件添加@flow标记，否则flow不会对文件进行类型检测
// @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来检测有无错误
yarn run build将文件打包到lib文件夹下，此时打包好的文件已经经过babel的处理，可以正常运行
数据类型
概览图
// @flow
// number：数字、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'
简化错误处理逻辑
求和函数
不用flow的错误处理逻辑如下
使用
flow的完整代码如下
// @flow
function sum(arr: Array<number>) {
return arr.reduce((total, prev) => {
return total + prev
})
}
sum([1, 2, 3])
函数类型
// @flow
function test(a: number, b: number): number {
return a + b
}
// 将变量声明为函数类型
let func: (a: number, b: number) => number = test
maybe类型
//@flow
// maybe：给数据添加了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)
会报错，因为类型推断c不可能是string
对象类型
//@flow
function hi(obj: {sayHello: () => void, name: string}) {
obj.sayHello()
}
let singer = {
name: 'jayChou',
sayHello () {
console.log('hi~~~')
}
}
hi(singer)
