Flow只是一个小工具,学习起来非常简单!
1.什么是 Flow
Flow 是一个 JavaScript 的静态类型检查器。2014 年由 Facebook 推出,使用Flow可以解决一些,由于 JavaScript 是一门弱类型语言所带来的弊端。为 JavaScript 提供了完善的类型系统。在 React 和 Vue中都可以看到Flow的身影。
2. Flow 的快速使用
-
Flow 的安装:
// 安装命令: `yarn add flow-bin --dev` // 初始化 Flow 命令: `yarn init flow` 执行完初始化命令后,会生成一个 .flowconfig 文件。 -
Flow的使用:
例:在项目中新建index.js,输入以下代码后执行命令 yarn flow ,这时会带命令行中打印出当前错误,以及错误的描述信息。
//@flow
//文件开头要以注释的方式添加 //@flow 标记,这样在执行 flow 检测时才会检查这个文件
//并且为代码当中的成员添加类型注释
function add(num1: number, num2: number) {
return num1 + num2
}
add(100, 100)
add('100', 100)
-
Flow的停止
// 停止命令: `yarn flow stop`
3. 编译 Flow 并移除注解
方法1. 基于官方的 flow-remove-types 来实现移除注解
安装命令:`yarn add flow-remove-types --dev`
// 执行完安装命令后,我们可以使用命令行工具去自动移除类型注解。
编译执行命令: `yarn flow-remove-types . -d dist` // 将当前目录下的文件编译到dist目录下
方法2. 基于官方的 babel 来实现移除注解
安装命令:`yarn add @babel/core @babel/cli @babel/preset-flow --dev`
并在根目录下添加 babel 配置文件 .babelrc
{
"presets": ["@babel/preset-flow"]
}
编译执行命令:`yarn babel . -d dist` // 将当前目录下的文件编译到dist目录下
4. Flow 开发工具插件
以上方法检测代码错误,都需要在命令行昂中去执行相应命令,所以使用起来并不方便。
我们可以在 vscode 中安装插件 —— Flow Language Support ,这样在保存文件后,会自动检测代码的错误,进行错误提示。