vue2.0使用Flow来做静态类型的检查

89 阅读2分钟

Flow官网地址:flow.org/en/docs/get… vue2源码学习链接:www.cnblogs.com/Model-Zacha…

为什么选择Flow

我们都知道Javascript是动态类型语言,灵活性很强,但是缺点就是很容易写出一些隐蔽的代码,在编译的时候不会报错,但在运行阶段就可能出现各种奇怪的bug。类型检查是当前动态类型语言的发展趋势,所谓类型检查,就是在编译期尽早发现由类型错误引起的bug,又不影响代码运行(不需要动态类型检查),使编写jsvascript具有和编写java等强类型语言相近的体验。

项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。VUE2.0 重构的时候,在ES2015的基础上,除了ESlint 保证代码风格之外,也引入了Flow做静态类型检查。跟Flow差不多的工具还有Typescript。

之所以选择Flow,主要是因为Babel和ESlint 都有对应的Flow插件以支持语法,可以完全沿用现有的构建配置,非常小成本的改动就可以拥有静态类型检查的能力。

Flow工作方式

类型检查的两种方式:

  • 类型推断:通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型。
  • 类型注释(常用):事先注释好我们期待的类型,Flow会基于这些注释来判断。
 npm install -g flow-bin
 // 还要初始话一下,才会有.flowconfig 文件
 flow init
 // 运行文件,直接
 flow
 

Flow在Vue源码中的应用

有时候我们想引用第三方库或者自定义的一些类型,但Flow并不认识,因此检查的时候就会报错。为了解决这类问题,Flow提出一个libdef 的概念,可以用来识别这些第三方库或者是自定义类型,而Vue.js 也利用了这一特性。 在Vue的主目录下有一个.flowconfig文件,它是Flow的配置文件。