认识flow
flow是facebook出品的javascript静态类型检查工具。Vue.js的源码利用了Flow做静态类型检查，所以了解flow有助于我们阅读源码。
为什么用Flow
javascript是动态类型语言，非常灵活，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的bug。
动态类型：指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。javascript是一门解释型语言，没有编译阶段，所以它是动态类型 。
静态类型：指在编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。typescript在运行前需要先编译为javascript，而在编译阶段 就会进行类型检查，所以typescript是静态类型。
类型检查时当前动态类型语言的发展趋势，所谓类型检查，就是在编译期间尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写javascript具有和编写java等请类型语言相近的体验。
项目越复杂就需要通过工具的手段来保证项目的维护性和增强代码的可读性。
Vue.js在做2.0重构的时候，在ES2015的基础上，处理ESLint保证代码风格之外，也引入了Flow做静态类型检查。之所以选择Flow，主要是因为Banel和ESLint都有对应的Flow插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。
Flow的工作方式
通常类型检查分成2种方式：
- 类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。
- 类型注释：事先注释好我们期待的类型，flow会给予这些注释来判断。
类型推断
它不需要任何代码修改即可进行类型检查，最小化开发者的工作量。他不会强制你改变开发习惯，因为它会自动推断出变量的类型，这就是所谓的类型推断，flow最重要的特性之一。
通过简单例子说明一下
/*@flow*/
function split(str) {
return str.split(' ')
}
split(11)
Flow检查上述代码后会报错，因为函数split期待的参数是字符串，而我们输入了数字
类型注释
如上所述，类型推断是Flow最有用的特性之一，不需要编写类型注释就能获取有用的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。
考虑如下代码：
/*@flow*/
function add(x, y){
return x + y
}
add('Hello', 11)
Flow检查上述代码时检查不出任何错误，因为从语法层面考虑，+既可以用在字符串上，也可以用在数字上，我们并没有明确指出add()的参数必须为数字。
在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号：开头，可以在函数参数，返回值，变量生命中使用。
如果上端代码中添加类型注释，就会变成如下：
/*@flow*/
function add(x: number, y: number): number {
return x + y
}
add('Hello', 11)
现在Flow就能检查出错误，因为函数参数的期待值类型为数字，而我们提供了字符串。
上面的例子时针对函数的类型知识。接下来我们来看看Flow能支持的一些常见的类型注释。
数组
/*@flow*/
var arr: Array<number> = [1, 2, 3]
arr.push('Hello')
数组类型注释的格式时Array<T>，T表示数组中每项的数据类型。在上述代码中，arr是每项均为数字的数组。如果我们给这个数组添加一个字符串，Flow能检查出错误。
类和对象
/*@flow*/
class Bar {
x: string; // x 是字符串
y: string | number; // y 可以是字符串或者数字
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)
}
类的类型注释格式如上，可以对类自身的属性做类型检查，也可以对构造函数的参数做类型检查。这里需要注意的是，属性y的类型中间用|做间隔，表示y的类型既可以是字符串也可以是数字。
对象的注释类型类似于类，需要指定对象属性的类型。
Null
若想任意类型T可以为null或者undefined，只需要类似如下?T的格式即可。
/*@flow*/
var foo: ?string = null
此时，foo可以为字符串，也可以为null。
如果想了解所有类型注释，请移步 Flow 的官方文档
Flow在Vue.js源码中的应用
有时候像引用第三方库，或者自定义一些类型，但Fow并不认识，因此检查的时候会报错。为了解决这类问题，Flow提出了一个libdef的概念
网友评论