从今天开始我要不间断地在分享 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;
}
<