Vue项目中使用flow做类型检测的方法


Posted in Javascript onMarch 18, 2020

在vue2.0的项目中加入flow类型检查。当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts(typescript)这种强类型的语言而言,后期维护会越来越困难。为了解决这个问题,决定使用flow 加入类型检查。

flow了解

flow是fackbook公布的javascript静态类型检查器。 可以检查js中一些bug,eg:自动类型转换中出现的问题。flow官网

首先,安装flow

npm i flow-bin --save-dev

然后在package.json中添加脚本

"scripts": {
  "flow": "flow check"
 }

在项目根目录下运行命令,生成文件.flowconfig

npm run flow init

打开 .flowconfig 文件,可以看到内容大致如下

.*/node_modules/.*
.*/test/.*
.*/build/.*
[include]
[libs]
[lints]
[options]
module.file_ext=.vue 
module.file_ext=.js
[strict]

其中在[ignore]下配置要忽略的文件,在[options]中我们可以添加
module.file_ext=.vue 这样的配置让flow检测vue单文件组件

  • [ignore]:Flow 默认检查项目目录下所有文件,但是有很多文件必定是我们不想检查的,就像 node_modules、build 等目录下的文件,所以我们需要在将这些目录写在 ignore 配置下。
  • [include]:所谓的项目目录其实是 .flowconfig 目录,并不是真正的项目目录,如果我们在这个项目中的某个目录下创建一个 .flowconfig,那么 .flowconfig 所在的目录也会变为一个 Flow 项目。那么,如果我们想对当前 Flow 项目以外的文件或者目录进行检查,需要把它们写在 include 配置项中。
  • [libs]:在项目中,我们可能会用到很多自定义的类型,比如说要记录对象的结构,它可能在每个文件中都会被运用到,我们将其抽取为全局的类型或数据结构,在任何文件都可以使用。为了管理方便,我们将全局类型都定义在一个或多个单纯的目录中统一管理。这里存放的有可能是一个定义好的数据结构,存放的也有可能是根据项目中某个类对应的数据类型。我们将这些文件或目录写在 libs 配置项中,这个配置对于我们使用 Flow 来说很重要。
  • [options]:这里填写对 Flow 项目的一些配置,配置项以key=value的形式,每行写一个。所有的配置见官方文档
  • [lints]:官网中没有提到 lints 相关的配置

然后,在需要flow进行类型检测的.js文件或.vue文件script标签内容最顶部,加上注释

// @flow

没有该注释对文件将不会进行类型检测

配置到到这里,我们可以运行 npm run flow 进行代码到类型检查,获取检查报告。

由于类型注释不是我们ES规范的一部分,因此我们需要把使用了flow的代码转换成正常的js代码,可以使用babel-preset-flow或babel-plugin-transform-flow-strip-types来移除它。

安装flow相关的flow插件:
babel-cli: babel-cli脚手架
babel-preset-flow: 用于编译前去除代码中的类型声明
babel-plugin-transform-flow-strip-types 同上,而选一

npm install --save-dev babel-cli babel-preset-flow

安装完后,在项目根目录的.babelrc文件(无则创建)里添加如下内容

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2",
  "flow"
 ],
 "plugins": [
  //"babel-plugin-transform-flow-strip-types"
 ]
}

如果想要在代码中实时看到flow类型检查的错误,需要安装eslint插件

npm i eslint-plugin-flowtype-errors --save-dev

然后在.eslintrc文件中添加配置:

{
 plugins: [
  'flowtype-errors'
 ],
 rules: {
  "flowtype-errors/show-errors": 2
 }
}

PS:在vscode中进行类型声明时可能会报"类型声明只能在.ts文件中使用"的错误,这时候找到setting,搜索javascript.validate,将其禁用即可

参考文章:Writing Vue.js Components with Flow

到此这篇关于Vue项目中使用flow做类型检测的方法的文章就介绍到这了,更多相关Vue flow 类型检测内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
ES6关于Promise的用法详解
May 07 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
JavaScript正则表达式验证登录实例
Mar 18 #Javascript
JS正则表达式验证密码强度
Mar 18 #Javascript
原生js实现密码强度验证功能
Mar 18 #Javascript
JavaScript实现密码强度实时验证
Mar 18 #Javascript
js如何验证密码强度
Mar 18 #Javascript
js验证密码强度解析
Mar 18 #Javascript
js实现超级玛丽小游戏
Mar 18 #Javascript
You might like
php的正则处理函数总结分析
2008/06/20 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
script不刷新页面的联动前后代码
2013/09/18 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
学习Vue组件实例
2018/04/28 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python组合无重复三位数的实例
2018/11/13 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
天坛导游词
2015/02/02 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js