「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
前言
弱类型编程语言，程序的异常只有在运行时才能发现，类型不明确的函数功能也有发生改变的可能，强类型编程语言错误更早暴露，重构更加牢靠，JavaScript 是弱类型语言，代码在执行的过程中才检查类型是否正确，使用flow就可以让JavaScript获得强类型语言一样的开发体验。通过在代码中添加注解的方式，标记每个变量或者参数是什么类型的，然后Flow根据这些注解就可以检查代码异常，从而实现在开发阶段类型异常的检查。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js 在做 2.0 重构的时候，在 ES2015 的基础上，除了 ESLint 保证代码风格之外，也引入了 Flow 做静态类型检查。
Flow 的工作方式
通常类型检查分成 2 种方式：
- 类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。
- 类型注释：事先注释好我们期待的类型，Flow 会基于这些注释来判断。
类型推断
它不需要任何代码修改即可进行类型检查，最小化开发者的工作量。它不会强制你改变开发习惯，因为它会自动推断出变量的类型。这就是所谓的类型推断，Flow 最重要的特性之一。
通过一个简单例子说明一下：
/*@flow*/
function split(str) {
return str.split(' ')
}
split(11)
Flow 检查上述代码后会报错，因为函数 split 期待的参数是字符串，而我们输入了数字。
类型注释
如上所述，类型推断是 Flow 最有用的特性之一，不需要编写类型注释就能获取有用的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。
考虑如下代码：
/*@flow*/
function add(x, y){
return x + y
}
add('Hello', 11)
Flow 检查上述代码时检查不出任何错误，因为从语法层面考虑， + 既可以用在字符串上，也可以用在数字上，我们并没有明确指出 add() 的参数必须为数字。
在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号 : 开头，可以在函数参数，返回值，变量声明中使用。
如果我们在上段代码中添加类型注释，就会变成如下：
/*@flow*/
function add(x: number, y: number): number {
return x + y
}
add('Hello', 11)
- 参数的冒号称为类型注解，在发布的时候会通过
Babel将注解消除，所以生产环境不会产生影响。 - 不要求所有的变量和参数都加注解，不加的为
any类型。
function sum (a: number, b: number) {
return n * n
}
sum(100, 50)
sum('100', 50) // 可以检测异常
Flow安装
yarn init -y // 初始化
yarn add flow-bin --dev // 安装 flow
Flow的使用
1.创建一个js测试文件
// @flow
function square(n: number): number {
return n * n;
}
square('25'); // Error! 传入了字符串
- 创建配置文件创建一个 .flowconfig文件
yarn flow init
3.执行flow check,得到如下报错结果
Flow编译
因为flow的类型注解不是javascript的标准语法，所以不能直接运行。我们需要将代码转换成浏览器可以执行的原始的JavaScript语言运行。所以我们可以在完成编码过后，移除掉我们添加的注解。 有两种方式官网提供flow-remove-types和Babel
1. 官网提供flow-remove-types
yarn环境
- 安装
yarn add flow-remove-types
- 运行
# 第一个是指定目录，-d 之后是输出目录
yarn flow-remove-types old -d new/
得到一个去调注解的新文件夹new
可以看到编译后的文件已经把注解去掉了
开发工具插件
VsCode中的插件：Flow Language Support
总结
flow静态类型检查的方式非常有利于大型项目源码的开发和维护，减少隐藏的bug，让代码更加符合预期。
