为什么使用flow?
首先明确一下何为动态类型语言:他指的是代码在运行阶段类型才明确,并且之后允许修改
那么什么是弱类型呢?其实就是存在隐式类型的转换比如
console.log(100 + '100') // 100100
这里是引用
这里会发生隐式类型转换,字符串看到了前面的加号,隐式的转换了数据类型,参与了运算,这些在java这类强类型的语言中是不被允许的
JavaScript作为一种动态弱类型的语言,有如下几个缺点:
- 缺失类型系统的可靠性
- 没有编译环境,导致有些错误不能尽早的暴露
- 代码提示不够智能,因为编辑器没有办法判断当前是什么类型,也就无法判断当前类型下有哪些方法
引入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运行之前发现类型问题
这是最近在拉勾教育学到的一点点知识 , 算是我自己为拉勾打个广告吧,个人认为收获蛮大的,大家不喜勿喷,看内容就好~~~