vuejs源码讲解从flow.js开始——一个JavaScript 静态类型检测工具

从今天开始我要不间断地在分享 JavaScript 进阶系列、web 性能等系列的文章的同时分享一些 Vuejs 的阅读源码理解。希望和广大程序员们一起进步，一起学习，一起分享。

1.从 flow.js 开始

官网上介绍 flow 是 JavaScript 静态类型检测工具，能够更规范、高效地编写 JavaScript 代码。
首先看个栗子：

// @flow
function square(n: number): number {
   
  return n * n;
}

square("2"); // Error!

从上面栗子中我们大概知道了 flowjs 的使用以及作用，在这里使用number规定了函数传参类型为数字否则报错。和 Ts 很像。

为什么先讲 flowjs？

在 Vue 文件夹目录下可以看到不少这样的代码，这些就是由 flow 构成：

flow 较之 typescript 的优势
更轻巧、即拿即用、适合在代码的各个地方无缝入侵。

安装

npm 或 yarn 随便选择， flow 是辅助型工具，辅助开发过程中使用，所以安装到 devDependency 下。

yarn add --dev flow-bin

安装转译工具@babel/core，@babel/cli,@babel/preset-flow，都是工具类都放 devDependency 下。

yarn add --dev @babel/core @babel/cli @babel/preset-flow

在项目根目录创建一个.babelrc 文件。放入代码：

{
   
  "presets": ["@babel/preset-flow"]
}

开始
初始化：

yarn run flow init

运行：

yarn run flow

flow 文件是以//@flow和/*@flow*/注释的 js 文件。例如：

// @flow
function foo(x: ?number): string {
   
  if (x) {
   
    return x;
  }
  return "default string";
}

这样 flow 就会检查这个文件，其他没注释的 js 文件会忽略检测。但可以使用flow check --all来检测所有 js 文件。

常见类型判断
比如:

function concat(a, b) {
   
  return a + b;
}

<