目录
- Flow概述
- Flow VS. TypeScript
- Flow安装
- Flow使用
-
- 在文件开头要使用注释
-
- 在代码中使用类型注解
-
- 在package.json中添加，
-
- 初始化flow
-
- 执行flow命令进行检查
-
- 关闭flow命令
-
- Flow编译
-
- 官网提供flow-remove-types
- npm环境
- yarn环境
-
- Babel
-
- Flow开发工具插件
- VSCode —— Flow Language Support（Flow 官方提供的）
- 其他的编辑器可以登录网站搜索
- Flow语法使用
Flow概述
Flow是JavaScript的静态类型检查器，是通过静态类型推断实现类型检查的。是2014年由FaceBook推出的一款工具，使用它就可以弥补JavaScript弱类型带来的一些弊端。可以说它为JavaScript提供了更完善的类型系统。在React和Vue的项目中，都看到Flow的使用。
JavaScript本身是动态类型检查的语言，代码在执行的过程中检查类型是否正确，C#和Java都是静态类型检查，在代码编译的时候检查类型是否正确。使用flow就可以让JavaScript有像C#和Java一样的开发体验。
通过在代码中添加注解的方式，标记每个变量或者参数是什么类型的，然后
Flow根据这些注解就可以检查代码异常，从而实现在开发阶段类型异常的检查。
- 参数的冒号称为类型注解，在发布的时候会通过
Babel将注解消除，所以生产环境不会产生影响。- 不要求所有的变量和参数都加注解，不加的为
any类型。
function sum (a: number, b: number) {
return n * n
}
sum(100, 50)
sum('100', 50) // 可以检测异常
Flow VS. TypeScript
Flow与TypeScript都是静态类型检查器，TypeScript的功能更加强大，但他们都是JavaScript的超集，基于JavaScript，最终都要编译成JS运行。一般大型项目都需要静态类型检查来确保代码的可维护性和可读性，Vue2.0的源码引入了flow，flow可以让代码在最小改动的情况下使用动态类型检查，而在Vue3.0中已经使用TypeScript开发了。
Flow安装
npm init -y
npm i flow-bin --dev
可以在node_modules的.bin目录中看到flow，我们可以在命令行中执行flow，作用就是项目中检查代码中类型异常。
Flow使用
1. 在文件开头要使用注释
@flow的标记，这样flow才会检查这个文件。
2. 在代码中使用类型注解
PS: 这里看到
VSCode中会有js的语法校验，需要手动关闭设置 ->
javascript valida-> 关闭JavaScript验证
3. 在package.json中添加，
"scripts": {
"flow": "flow"
}
如果是yarn直接运行yarn flow即可，也可以不设置scripts直接npx flow运行
4. 初始化flow
运行下面的语句，会再同级目录下生成一个.flowconfig的配置文件
npm run flow init
# > TypeScript@1.0.0 flow E:\professer\TypeScript
# > flow "init"
5. 执行flow命令进行检查
npm run flow
# > TypeScript@1.0.0 flow E:\professer\TypeScript
# > flow
# Launching Flow server for E:\professer\TypeScript
# Spawned flow server (pid=5816)
# Logs will go to C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.log
# Monitor logs will go to C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.monitor_logNo errors!
6. 关闭flow命令
npm run flow stop
# > TypeScript@1.0.0 flow E:\professer\TypeScript
# > flow "stop"
# Trying to connect to server for `E:\professer\TypeScript`
# Told server for `E:\professer\TypeScript` to die. Waiting for confirmation...
# Successfully killed server for `E:\professer\TypeScript`
Flow编译
因为flow的类型注解不是javascript的标准语法，所以不能直接运行。我们需要将代码转换成浏览器可以执行的原始的JavaScript语言运行。所以我们可以在完成编码过后，移除掉我们添加的注解。
1. 官网提供flow-remove-types
npm环境
- 安装
npm i flow-remove-types --dev
package.json中修改配置
# 把src目录下的编译之后转到dist目录下
"scripts": {
"flow": "flow",
"flowRemove": "flow-remove-types src/ -d dist/"
}
- 运行
npm run flowRemove
可以看到在dist目录下有了编译之后的js文件
yarn环境
- 安装
yarn add flow-remove-types
- 运行
# 第一个是指定目录，-d 之后是输出目录
yarn flow-remove-types src -d dist/
2. Babel
1) 安装
yarn环境
# @babel/cli我们可以直接使用babel命令完成编译
# @babel/perset-flow包含了我们转换flow类型检查的插件
yarn add @babel/core @babel/cli @babel/perset-flow
npm环境
npm i @babel/core @babel/cli @babel/perset-flow --dev
2) 添加配置文件
同级目录添加.babelrc文件，添加配置
{
"presets": ["@babel/preset-flow"]
}
3) 使用
yarn环境
yarn babel src -d dist
npm环境
在package.json中添加
"scripts": {
"babel": "babel src/ -d dist/"
}
运行babel
npm run babel
Flow开发工具插件
异常不在终端显示，开发工具中直接显示。
VSCode —— Flow Language Support（Flow 官方提供的）
可以在代码中直接看到并修改
