在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
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]