javascript的扩展：如何使用flow静态分类进行检查报错

# 全局安装
npm i -g flow-bin

# 本地安装
npm i -D flow-bin

使用

flow init                       # 初始化项目

flow check path/to/dir          # 检查这个目录下所有的文件
flow check path/to/js/file      # 检查指定文件
3. 配合 babel 一起使用
因为 flow 静态类型只是对 js 的扩展，并不是 js 原生支持的，也不能直接运行，所以，一般 flow 都是配合 babel 一起使用的，这样就可以在程序运行的时候进行静态类型检查，达到我们想要的效果。
3.1 babel-preset-flow
安装 babel-preset-flow，这样 babel 在转码 js 文件时就能识别 flow 的语法。
npm i -D babel-preset-flow
.babelrc
{
  "presets": ["flow"]
}
源文件（flow）
// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3
转码后的文件
// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3
3.2 babel-plugin-flow-runtime
一般会在开发环境下，使用 babel-plugin-flow-runtime 插件，这样就可以在开发的时候，实时检查数据类型，就像原生的运行 flow 静态类型检查一样。（一般在产品环境不会使用这个功能，因为会额外消耗 js 的性能）
npm i -D babel-plugin-flow-runtime flow-runtime
.babelrc
{
  "presets": ["flow"],
  "plugins": ["flow-runtime"]
}
源文件（flow）
// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3
转码后的文件
import t from 'flow-runtime';


// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

t.annotate(plus, t.function(t.param('a', t.number()), t.param('b', t.number()), t.return(t.number())));
plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3
这个时候，js 文件就会导入 flow-runtime 模块，对 plus 函数的参数 a, b 和返回值进行数据类型检查，如果不符合数据定义，就会报错。
以上就是javascript的扩展：如何使用flow静态类型进行检查报错的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：javascript的扩展：如何运用flow静态分类进行检查报错