[Vue源码学习]认识Flow

79 阅读1分钟

为什么使用Flow

image.png

总结:保证项目的维护性和增强代码的可读性

Flow工作方式

  1. 类型判断

flow会根据上下文语境判断变量类型

//以下方法会报错,因为strs期待一个字符串,却传进来一个数字
function strs(str){
    return str.split("")
}
strs(13)
  1. 类型注释

这是flow最常用的工作方式,在定义变量时就注释变量的类型

//字符串,数字,布尔
var str:string | number | boolean= 'hahahha'
//数组
var arr:Array<number,number> = [1,2] || var arr:Array<number> = [1,2]
//类
class Bar{
    x:string,
    y:?string,        //表示y可以为 * null *,* undefined *,* string *,
    z:number,
    
    constructor(x:string,y:?string){
        this.x = x
        this.y = y
    }
}
var bar:Bar = new Bar('xx')
//对象
var Bar:{a:number,b:string,c:Array<string>,d:Bar} = {
    a:11,
    b:'haha',
    c:['g','h'],
    d:new Bar('xx','yy')
}

Flow在Vue.js源码中的应用

image.png