Flow是JavaScript静态类型检查器,是2014年由facebook推出的一款工具。使用它可以弥补JavaScript弱类型带来的一些弊端,它为JavaScript提供了更完善的类型系统。目前在react和vue中都可以看到flow的使用。
它的工作原理是:在代码中通过添加类型注解的方式去标记代码中变量或参数等应该是什么类型的,flow就会根据这些类型注解检查代码中是否存在类型使用上的异常,从而实现类型异常的检查。避免了在运行阶段才发现类型使用上的错误。
下图实参传入的是字符串类型,自动报错了。
对于代码中这些额外的类型注解,可以通过babel或者flow官方提供的模块自动去除,所以在生产环境这些类型注解不会有任何影响。
flow还有一个特点:它并不需要给每个变量都提供注解,所以根据需要添加注解即可。
flow快速上手
写类型注解的时候会报错,是因为:number不是标准的javascript语法,而vs code会自动校验javascript语法。
在setting中关闭这一项就好了
写完一段代码执行flow命令,会报错,could not find .flowconfig。
这是flow的配置文件,可以用yarn flow init创建.flowconfig文件,里面会有一些初始的配置选项。
再次执行yarn flow,第一次可能会有点慢,以后就可以了
看到报错信息,意思是传入的字符串不合法
用flow stop 结束服务
这样就可以用flow帮我们找到类型使用的问题了。
总结:
- 首先在项目中安装flow的检查工具:flow-bin模块
- 然后我们在需要flow的类型检查文件中添加@flow注释标记
- 接着在代码中为成员添加类型注释
- 最后使用flow-bin提供的flow命令检查代码中的问题
移除flow类型注解的两种方式
- flow官方提供的flow-remove-types
- 使用bable配合flow转换的插件
如果项目中使用了bable,建议使用第二种方式。
flow开发工具插件
使用插件代替了在终端输入命令的方式,在代码编写的过程中就可以显示报错,更加便捷。
在vs code插件中搜flow,flow language support 是官方提供的插件。
需要注意的是保存过后才显示报错问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。