探索Vue.js底层源码—— flow静态类型检测

flow

    由于JavaScript是一门动态类型语言，它并不像Java、C#这类语言具备静态类型的检测。而flow可实现对JavaScript中静态类型的检测，防止出现类型错误，造成bug的情况出现。并且flow和Babel 、ESLint有很好的支持。所以，在Vue.js的源码的构建中，就使用了flow来作为静态类型的检测。

安装配置&使用

    先打开终端，全局安装flow-bin

	npm i -g flow-bin

    任意新建一个文件夹（需要注意的是，这个文件夹所在的路径必须是英文的！），在当前文件目录下打开终端

	flow init

    对应会在该目录下生成.flowconfig文件

	[ignore]

	[include]
	
	[libs]
	
	[lints]
	
	[options]
	
	[strict]

    在该文件目录下任意新建JS文件，输入一段代码

/*@flow*/

function split(str) {
  return str.split(' ')
}

split(11)

    在终端中输入flow，将会提示错误

类型注释

    类型注释用于声明函数时形参的数据类型，或函数返回的数据类型

	function add(a: number, b: number): number {
		return a + b
	}

    描述：这个函数会对传入的a、b形参进行类型检测，即必须为Number类型，并且返回的值也必须是Number
在flow中也可以针对null或void，进行类型注释

	function voidFunction(param: void){
		return 'i am void'
	}
	function nullFunction(param: null){
		return 'i am null'
	}

对变量的检测

    简单的类型检测

	var num: number = 1
	var name: string = '吴敬昌'
	var score: float = 99.9
	var arr: Array<number> = [1, 2, 3, 4]
	var toggleVale: boolean = true
	var student: {name: string, age: number, score: float} = {
		name: '吴敬昌',
		age: 22,
		score: 99.9
	}

    可选的类型判断

	var a: number | string

    描述：在flow中管道符代表或，即a这个变量可以是Number或String

    类型判断

	var student: ?object

    描述：即student这个变量可以为null或对象