在开始之前,我们先看一个例子:
```
function foo(x) {
return x + 666;
}
foo('HelloWorld!')
```
上面的函数中,我们希望传入的`x`这个参数是个数字类型,但是很多时候都不是像我们希望的那样。在JavaScript语言中,加号(+)除了作为数字的加运算外,也可以当作字符串的连接运算。如果传入的不是数字类型而是字符串类型,则结果却成了字符串拼接,想当然这并不是我们想要的结果。
于是,我们的主角就要出场了~
[Flow](https://flowtype.org/)是个JavaScript的静态类型检查工具,由Facebook出品的开源码项目。
> 所谓类型检查,就是在编译期尽早发现(由类型错误引起的)bug,又不影响代码运行(不需要运行时动态检查类型),使编写js具有和编写Java等强类型语言相近的体验。
> 它可以:
> 1.使得大型项目可维护
> 2.增加代码的可读性
> 3.通常会有更好的IDE支持
Flow这类解决方案的出现,是因为JavaScript是一种弱(动态)数据类型的语言,弱(动态)数据类型代表在代码中,变量或常量会自动依照赋值变更数据类型,而且类型种类也很少,这是直译式脚本语言的常见特性,但有可能是优点也是很大的缺点。优点是容易学习与使用,缺点是像开发者经常会因为赋值或传值的类型错误,造成不如预期的结果。并且,在一个较大的项目中就会发现这其实是一件挺糟糕的特性,因为和你协作的程序员往往不太清楚你所写的代码到底哪种类型才是正确的,一般都是用详尽的文字说明,来降低这个问题的发生,但JS语言本身无法有效阻止这些问题,而且编写文字说明这个本身就很耗时间,对于阅读者也一样。
于是基于这个需求有了Typescript和Flow的产生。
Flow和Typescript都是给Javascript增加类型检查的优秀解决方案,两者的简单对比如下:
| 工具 | Flow |TypeScript |
|--- | --- |--- |
| 公司 | Facebook | 微软 |
| star | 19.7k | 50.7k |
| 文档支持程度 | 中 | 高 |
| 优点 | 自由度高,易上手,老项目迁移成本低 | 工程化高,社区活跃,官方支持,学习曲线陡 |
| 代表框架 | Vue | Angular |
对于两者使用场景差别,可以简单总结为:对于新项目,可以考虑使用TypeScript或者Flow,对于已有一定规模的项目则建议使用Flow进行较小成本的逐步迁移来引入类型检查。除了 Flow 的类型声明之外,其他都是标准的 ES。万一哪天不想用 Flow 了,用 babel-plugin-transform-flow-strip-types 转一下,就得到符合规范的 ES。