Vue 2.0源码初学习之 - Flow静态类型检查器

Flow 是FaceBook出品的Javascript静态类型检查器(工具),Vue2.0的源码使用了Flow作为静态类型检查功能。
因为Javascript是动态类型语言(弱类型),所以它非常具有灵活性,当然这个灵活性很容易让我们在定义变量,传递参数等时候出现各种隐患,这种隐患在开发初期不会照成影响,但是在生产环境运行时可能会因为各种因素照成各种奇怪的Bug。
因此类型检查是Javascript发展的趋势(弱的始终要变强嘛),使用类型检查,就是为了在开发期尽早发现各种类型问题,让我们能用Javascript编写出和各类强类型语言相近的体验。

Flow的类型检查方式

/@flow/ //作为Flow检查标记

  • 类型推断:通过变量的使用上下文来推断出变量类型,然后根据这些来推断出检查类型。
/*@flow*/
function split(str){
  return str.split(" ")
}
split(11)
  • 类型注释:事先注视好我们期待的类型,Flow会基于这些设置来判定。
/*@flow*/
function add(x: number, y:number){
  return x+y
}
add("hello", 11);

通过在函数参数的后面加:来设定类型。
这样就能使用Flow的注释类型检查功能。

常见的检查类型:

Array:

Array<T> // 定义数组格式类型。T可以是其他类型 string,number,也可以是二维数组array,也可以是对象格式object

/*@flow*/
let arr_number: Array<number> = [1, 2, 3,4];//定义纯数字数组格式
arr_number.push("5")
let arr_string: Array<string> = ['1', '2', '3','4'];//定义纯数字数组格式
arr_string.push(5)
let arr_array: Array<array> = [[], [], [],[]];//定义纯二维数组格式
arr_array.push(5)

Class

// @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
 }
}
let bar:Bar = new Bar("1", 1);

Object:

#### String:

// @flow
const obj: {a: string, b:number, c:Array<string>, d:Bar} = {
a: "1",
b: 1,
c: ["1", "2"],
d: new Bar("3", 4);
}

// @flow
function flowString(value: string) {
  return value
}

flowString(42);       // 错误!
flowString(3.14);     // 错误!
flowString(NaN);      // 错误!
flowString(Infinity); // 错误!
flowString("foo");    // 通过!

Number:

// @flow
function flowNumber(value: number) {
  return value
}

flowNumber(42);       // 通过!
flowNumber(3.14);     // 通过!
flowNumber(NaN);      // 通过!
flowNumber(Infinity); // 通过!
flowNumber("foo");    // 错误!

Boolean

// @flow
function flowBoolean(value: boolean) {
    return value
}

flowBoolean(true);  // 通过!
flowBoolean(false); // 通过!
flowBoolean("foo"); // 错误!
flowBoolean(0);          // 错误!
flowBoolean(Boolean(0)); // 通过!
flowBoolean(!!0);        // 通过!

Null

// @flow
function flowNull(value: null) {
return value
}
flowNull(null); // 通过!
flowNull(undefined); // 错误!

Undefined

function flowUndefined(value: void) {
     return value;
}
flowUndefined(null);      // 错误!
flowUndefined(undefined); // 通过!

需要设定任意类型可以为null或者undefined只需要使用?T即可

let str: ?string = null;

这样设定代表str可以是null、undefined,也可以是string;

可以使用 | 来做间隔,表示key可以为 | 前后两个类型;

更多类型检查设定请查看官网即可 https://flow.org/en/docs/types/primitives/

发表新评论