js语言进阶 - Flow

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)