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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
element中table高度自适应的实现
Oct 21 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 用sock技术发送邮件的函数
2007/07/21 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
公司薪酬管理制度
2014/01/31 职场文书
继承公证书
2014/04/09 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
夏季药店促销方案
2014/08/22 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
python基础之爬虫入门
2021/05/10 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫