Flow是JavaScript静态类型检查器,是2014年由facebook推出的一款工具。使用它可以弥补JavaScript弱类型带来的一些弊端,它为JavaScript提供了更完善的类型系统。目前在react和vue中都可以看到flow的使用。

它的工作原理是:在代码中通过添加类型注解的方式去标记代码中变量或参数等应该是什么类型的,flow就会根据这些类型注解检查代码中是否存在类型使用上的异常,从而实现类型异常的检查。避免了在运行阶段才发现类型使用上的错误。

下图实参传入的是字符串类型,自动报错了。

image.png

对于代码中这些额外的类型注解,可以通过babel或者flow官方提供的模块自动去除,所以在生产环境这些类型注解不会有任何影响。

image.png

image.png

flow还有一个特点:它并不需要给每个变量都提供注解,所以根据需要添加注解即可。

flow快速上手

image.png

写类型注解的时候会报错,是因为:number不是标准的javascript语法,而vs code会自动校验javascript语法。
image.png

在setting中关闭这一项就好了
image.png

写完一段代码执行flow命令,会报错,could not find .flowconfig。
这是flow的配置文件,可以用yarn flow init创建.flowconfig文件,里面会有一些初始的配置选项。

image.png

再次执行yarn flow,第一次可能会有点慢,以后就可以了
image.png

看到报错信息,意思是传入的字符串不合法
image.png

用flow stop 结束服务
image.png

这样就可以用flow帮我们找到类型使用的问题了。

总结:

  1. 首先在项目中安装flow的检查工具:flow-bin模块

image.png

  1. 然后我们在需要flow的类型检查文件中添加@flow注释标记

image.png

  1. 接着在代码中为成员添加类型注释

image.png

  1. 最后使用flow-bin提供的flow命令检查代码中的问题

移除flow类型注解的两种方式

  1. flow官方提供的flow-remove-types

image.png

  1. 使用bable配合flow转换的插件

image.png
image.png

如果项目中使用了bable,建议使用第二种方式。

flow开发工具插件

使用插件代替了在终端输入命令的方式,在代码编写的过程中就可以显示报错,更加便捷。
在vs code插件中搜flow,flow language support 是官方提供的插件。
需要注意的是保存过后才显示报错问题。

image.png

flow原始类型

image.png


枕头
1 声望0 粉丝

前端,永远在路上