乐趣区

关于前端:FlowJavaScript静态类型检查器

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 原始类型

退出移动版