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帮咱们找到类型应用的问题了。

总结:

  1. 首先在我的项目中装置flow的查看工具:flow-bin模块

  1. 而后咱们在须要flow的类型查看文件中增加@flow正文标记

  1. 接着在代码中为成员增加类型正文

  1. 最初应用flow-bin提供的flow命令查看代码中的问题

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

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

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


如果我的项目中应用了bable,倡议应用第二种形式。

flow开发工具插件

应用插件代替了在终端输出命令的形式,在代码编写的过程中就能够显示报错,更加便捷。
在vs code插件中搜flow,flow language support 是官网提供的插件。
须要留神的是保留过后才显示报错问题。

flow原始类型