JavaScript静态类型检查器FLow的使用

为什么使用flow？

首先明确一下何为动态类型语言：他指的是代码在运行阶段类型才明确，并且之后允许修改
那么什么是弱类型呢？其实就是存在隐式类型的转换比如

console.log(100 + '100') // 100100

这里是引用

这里会发生隐式类型转换，字符串看到了前面的加号，隐式的转换了数据类型，参与了运算，这些在java这类强类型的语言中是不被允许的

JavaScript作为一种动态弱类型的语言，有如下几个缺点：

1. 缺失类型系统的可靠性
2. 没有编译环境，导致有些错误不能尽早的暴露
3. 代码提示不够智能，因为编辑器没有办法判断当前是什么类型，也就无法判断当前类型下有哪些方法

引入flow

那么为了给JavaScript添加一个静态的类型检查器，引入flow来在js代码执行之前检查

flow 安装

flow安装： 这里使用了yarn在开发环境中安装

yarn add flow-bin --dev

flow初始化

yarn flow init

初始化之后会增加一个.flowconfig文件

接下来写一段带有类型注解的js代码

function add(x:number){
   return function(y :number){
       return x + y
   }
}
add(100)('100')

注意一下：这个地方某些编辑器会在 ：number的位置上报错，不用管他，或者暂时关闭提示即可

flow运行

使用如下命令运行flow

yarn flow

注意文件路径不能有中文字符！否则运行会失败！

我们看到 字符串的位置发现了一个错误

flow停止

使用命令

yarn flow stop

flow自动移除注解

方法一：

首先 通过命令安装 flow-remove-types

yarn add flow-remove-types --dev

紧接着使用命令

yarn flow-remove-types . -d dist(输出目录)
这里我把当前文件夹下的带有注解的js文件进行处理，并且输出到了dist目录下

然后会在dist中生成一个去处注解的同名 js文件

方法二 ：

使用babel来去处类型注解
首先通yarn 安装如下 插件

yarn add @babel/core @babel/cli @babel/preset-flow --dev

然后手动增加一个 .babelrc 配置文件

使用命令来进行编译

yarn babel . -d dist

其实总的来看，flow为JavaScript提供了一个编译环节，以便于在JavaScript运行之前发现类型问题

这是最近在拉勾教育学到的一点点知识 , 算是我自己为拉勾打个广告吧,个人认为收获蛮大的,大家不喜勿喷,看内容就好~~~