DDR爱好者之家

Vue项目中使用flow做类型检测的方法
站长资源 2024/11/24 佚名
73 1538
DDR爱好者之家 Design By 杰米

在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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米