vue2.0项目配置flow类型检查

Rocko 发布于2019-08-20 16:01 / 2256人阅读

摘要：在的项目中加入类型检查。当前项目是用写的，当项目越来越大，由于弱类型的特性，相比这种强类型的语言而言，后期维护会越来越困难。为了解决这个问题，决定使用加入类型检查。一了解是公布的静态类型检查器。中配置配置，使其支持语法。

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

一、flow了解

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

引用flow官网的介绍

flow is a static type checker for javascript

flow初体验

// @flow
let a:number = 2;
function foo(b:tring):boolean{
    return false;
}

使用bebel转换后

let a = 2;
function foo(b){
    return false;
}

从上面代码可以看出，使用flow后的代码更清晰明了。虽然使用注释也可以实现，但使用注释太繁琐，而且不直观。

二、flow的安装

flow可以直接通过npm或者yarn安装。官网推荐安装方式

这里以npm为例

npm install --save-dev flow-bin

安装完成后在package.json中加入下面的脚本

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

同时还要安装babel编译器，将flow的类型检查代码从代码中剥离，转变成正常的js代码

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

在babel配置文件.babelrc中加入

{
  "presets": ["flow"]
}

三、flow使用 配置flow

1、npm run flow init生成flow配置文件.flowconfig 官网配置传送门

我的配置文件

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue 
module.file_ext=.js

2、新建一个文件index.js

// @flow 
let a:number = "3";

// @flow或者 /* @flow */告诉flow检查这个文件
输入npm run flow 执行类型检查

注：在vue单文件组件使用flow需要额外配置

1、在.flowconfig文件的[options]中配置.vue文件扩展名

module.file_ext=.vue

2、在.vue文件中需注释掉template script styled标签
参考连接：

How to get Flow to properly work with Vue 2 (webpack)?

Support HTML files

/* @flow

*/
// 
/*

*/

注意：
1、在注释template和style时使用/**/注释，在template和style内部不能再使用 /* */这种注释，这个不是flow不识别，本来就不应改/**/中嵌套/**/,应该在/**/中采用 // 注释风格
2、如果不想在.vue中使用注释的方法，可以在ide中安装flow，但是不能使用npm run flow来检查了。

webstorm中配置flow

配置webstorm，使其支持flow语法。官网ide配置

总结一下为3点：

1、安装node包

2、全局安装flow

3、在框架设置中选择JavaScript flow

以上是我在vue2.0项目安装flow的全部过程。

参考文章：

Flow教程（一） - 简介和开始

Writing Vue.js Components with Flow

GPU云服务器云服务器 vue2.0 cdn 静态类型检查 js检查数据类型 java怎么检查类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82657.html

JS 静态类型检查工具 Flow

摘要：本文主要介绍了解决作为弱类型语言没有类型检查痛点的静态类型检查工具，并且介绍了在中使用的方法，最后介绍了一些常用的语法。本文主要介绍了解决JS作为弱类型语言没有类型检查痛点的静态类型检查工具 Flow ，并且介绍了在WebStorm中使用Flow的方法，最后介绍了一些常用的Flow语法。 1. 简介 JS作为一种脚本语言是没有类型检测的，这个特点有时候用着很方便，但在一个较大的项目中...

CloudDeveloper 2019-08-22 16:17 评论0 收藏0
react源码解析004 - 关于类型检查工具flow

摘要：简介是推出的类型检查工具。使得咱们可以指定变量的类型，避免此类错误的发生。停用后台进程，使用以上示例的源码。配置文件这部分将结合的和官方文档进行解析。一个文件简称，就类似于中的头文件，是用来定义跨项目可用的全局变量。 Flow 简介 flow是facebook推出的js类型检查工具。js是一门弱类型语言，没有从语言层面去保证变量类型不匹配的基本错误。flow使得咱们可以指定变量的类型，...

huayeluoliuhen 2019-08-20 15:35 评论0 收藏0
flow从零开始----安装和配置

摘要：资源官网安装参考什么是是一个弱类型的解释性语言，无法在编译环节进行静态类型校验，如果想也具备静态类型检查功能。那就得使用到由推出，官网是。资源官网：https://flow.org/ 安装：https://flow.org/en/docs/inst... 参考：https://www.01hai.com/note/av... https://www.jianshu.com/p...

KoreyLee 2019-08-23 14:32 评论0 收藏0
jslint、flow 与 typescript

摘要：命令行目录文件运行后将会检查目录下的文件，并将有问题的语句打印出来。使用成本中搭配编辑器使用是开发过程中的最佳实践。是推出的一款静态类型检查工具。收益偏高对代码做了类型检查，可以避免之类的错误。 jslint airbnb-config jslint 的作用是对 js 做语法检查，他可以使代码更加规范、清晰，而 airbnb-config 是其中最流行的一套检查规则。安装方法 npm...

habren 2019-08-19 18:21 评论0 收藏0