vue源码分析——认识flow

Flow是facebook出品的JS类型检查工具，他可以做类型检查，所谓的类型检查就是在编译期间今早发现由类型错误引起的bug，又不影响代码运行，使编写JS具有编写JAVA等强elixir语言相近的体验，所以vue使用flow做了静态检查。

Flow通常类型检查分成两种：

1.类型判断

2.类型注释

一、类型判断是通过变量的使用上下文来推断出变量类型，然后根据这些判断来检查类型（相对于在那写了个If），他不需要任何修改即可进行类型检查。

　　例子：

/*@flow*/''

function aplit(str){

    return str.split('');

}

split(11);　　　　//这个会报错因为函数split期待的参数是字符串，我们输入了数字

二、类型注释：在某种条件下添加类型注释可以更高明确的检查依据。

　　例子：

/*@flow*/

function add(x:number,y:number):number{

    return x+y

}

add('hello',11);　　//报错因为hello是字符串

常见的类型注释

数组：

　　例子

/*@flow*/

var arr:Array<number> = [1,2,3]

arr.push('hello');　　　　//报错

类和对象

　　例子

/*@flow*/

class Bar{

    x:string;

    y:string | number;

    z:boolean;

　　constructor(x:string,y:string|number){
　　　　this.x = x;
　　　　this.y = y;
　　　　this.z = false
　　}
}

var bar:Bar = new Bar('hellow',4)

var obj:{ a:string, b:number, c:Array<string>,d:Bar} = {
　　
　　a:'hello',
　　b:11,
　　c:['hello','world'],
　　d:new Bar('hello',3);
}

Null:若想任意类型可以为null或者是undefined，那么如例子所示就行了

　　例子

/*@flow*/

var foo:?string = null

如果想了解更多，那么可以访问flow官方文档。

vue源码分析——认识flow

猜你喜欢