Flow——JavaScript静态类型检查器

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

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

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

Flow——JavaScript静态类型检查器_第1张图片

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

Flow——JavaScript静态类型检查器_第2张图片

Flow——JavaScript静态类型检查器_第3张图片

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

flow快速上手

Flow——JavaScript静态类型检查器_第4张图片

写类型注解的时候会报错,是因为:number不是标准的javascript语法,而vs code会自动校验javascript语法。
Flow——JavaScript静态类型检查器_第5张图片

在setting中关闭这一项就好了
Flow——JavaScript静态类型检查器_第6张图片

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

Flow——JavaScript静态类型检查器_第7张图片

再次执行yarn flow,第一次可能会有点慢,以后就可以了
Flow——JavaScript静态类型检查器_第8张图片

看到报错信息,意思是传入的字符串不合法
Flow——JavaScript静态类型检查器_第9张图片

用flow stop 结束服务
image.png

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

总结:

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

Flow——JavaScript静态类型检查器_第10张图片

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

Flow——JavaScript静态类型检查器_第11张图片

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

Flow——JavaScript静态类型检查器_第12张图片

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

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

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

Flow——JavaScript静态类型检查器_第13张图片

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

Flow——JavaScript静态类型检查器_第14张图片

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

flow开发工具插件

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

Flow——JavaScript静态类型检查器_第15张图片

flow原始类型

Flow——JavaScript静态类型检查器_第16张图片

你可能感兴趣的:(typescript,前端)