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

在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 类型检测内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-03-17

vue项目配置使用flow类型检查的步骤

你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug.Flow就是JavaScript的静态类型检查工具,该库的目标在于检查JavaScript中的类型错误,开发者通常不需要修改代码即可使用,故使用成本很低.同时,它也提供额外语法支持,使得开发者能更大程度地发挥Flow的作用. 一.flow的安装 flow可以直

Vue项目配置跨域访问和代理proxy设置方式

在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

VueCli4项目配置反向代理proxy的方法步骤

Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0

详解如何在你的Vue项目配置vux

做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux. 1.项目里安装vux npm install vux --save 2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置)

vue-cli3项目配置eslint代码规范的完整步骤

前言 最近接手了一个项目,由于之前为了快速开发,没有做代码检查.为了使得代码更加规范以及更易读,所以就要eslint上场了. 安装依赖 安装依赖有两种方法: 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖. 在package.json文件加上相应依赖: "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0&qu

在Vue项目中取消ESLint代码检测的步骤讲解

在Vue项目中编写代码的时候经常会碰到这种烦人的无故报错,其实这是ESLint代码,如图下: 解决办法: File>Settings>ESLint>取消检测即可(将Enable选项去勾选)>apply,如下图: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

在Python 3中实现类型检查器的简单方法

示例函数 为了开发类型检查器,我们需要一个简单的函数对其进行实验.欧几里得算法就是一个完美的例子: def gcd(a, b): '''Return the greatest common divisor of a and b.''' a = abs(a) b = abs(b) if a < b: a, b = b, a while b != 0: a, b = b, a % b return a 在上面的示例中,参数 a 和 b 以及返回值应该是 int 类型的.预期的类型将会以函数注解的形式

vue cli3 配置proxy代理无效的解决

vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

Vue+webpack项目配置便于维护的目录结构教程详解

新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS