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文件
JavaScript静态类型检查器FLow的使用_第1张图片
接下来写一段带有类型注解的js代码

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

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

flow运行

使用如下命令运行flow

yarn flow

注意文件路径不能有中文字符!否则运行会失败!
JavaScript静态类型检查器FLow的使用_第2张图片

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

flow停止

使用命令

yarn flow stop

flow自动移除注解

方法一:

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

yarn add flow-remove-types --dev

紧接着使用命令

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

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

JavaScript静态类型检查器FLow的使用_第3张图片

方法二 :

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

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

然后手动增加一个 .babelrc 配置文件
JavaScript静态类型检查器FLow的使用_第4张图片
使用命令来进行编译

yarn babel . -d dist

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

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

你可能感兴趣的:(JavaScript世界,flow,javascript,yarn,node.js)