vue源码分析Flow

最新推荐文章于 2025-10-23 01:14:20 发布

原创最新推荐文章于 2025-10-23 01:14:20 发布 · 713 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #前端框架

vuejs源码分析专栏收录该内容

2 篇文章

订阅专栏

本文探讨JavaScript中的隐性bug，介绍Flow如何通过类型推断和注释进行编译时检查，以及常见的数组、类对象、null类型注解示例。同时对比Flow与TypeScript，强调在编程中使用静态类型检查的重要性。

一、认识Flow

1、为什么⽤ Flow ?

JavaScript 是动态类型语⾔，它的灵活性有⽬共睹，但是过于灵活的副作⽤是很容易就写出⾮常隐蔽的隐患代码，在编译期甚⾄看上去都不会报错，但在运⾏阶段就可能出现各种奇怪的 bug。

2、Flow 的⼯作⽅式?

通常类型检查分成 2 种⽅式：

类型推断：通过变量的使⽤上下⽂来推断出变量类型，然后根据这些推断来检查类型。

/*@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*/ 
var arr: Array<number> = [1, 2, 3] arr.push('Hello')
//数组类型注释的格式是 Array<T> ， T 表⽰数组中每项的数据类型。
// 在上述代码中，arr 是每项均为 数字的数组。


//类和对象 
/*@flow*/ 8
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) 
}

// Null 
若想任意类型 T 可以为 null 或者 undefined ，只需类似如下写成 ?T 的格式即可。 
/*@flow*/ var foo: ?string = null 
// 此时， foo 可以为字符串，也可以为 null 。

类似 Flow 的⼯具还有如 TypeScript，感兴趣的同学也可以⾃⾏去了解⼀下。