Vue.js --- Flow

2022-01-11  本文已影响0人  小圆圈Belen

Flow的工作方式

类型检查分为2种方式:

类型判断

不需要任何代码修改即可进行类型检查,最小化开发者的工作量。

/*@flow*/
function split (str) {    
        return str.split (' ')  
}

split(11) //会报错

Flow 检查上述代码后会报错,因为函数 split 期待的参数是字符串。

类型注释

可以使用类型注释来指明期望的类型,类型注释是以冒号“ :”开头,可以在函数参数,返回值,变量声明中使用。

/*@flow*/
function add (x: number , y: number) : number{    
        return x + y
}

add('hello', 11) //会报错

Flow检查上述代码后会报错,因为函数参数期待的类型为数字。

类型注释 - 数组
/*@flow*/
var arr: Array<number> = [1,2,3]
arr.push('Hello') //会报错

数组类型注释的格式是 Array<T>,T表示数组中每项的数据类型。

类型注释 - 类和对象
/*@flow*/
class Bar {
    x: string;         //x 是字符串
    y: string | number;          // y 可以是字符串或者数字
    z: boolean;         // z 是布尔值

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

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

上一篇下一篇

猜你喜欢

热点阅读