Flow-javascript类型检测工具

by: kelen / 2016-11-11

Flow,一个新的Javascript静态类型检查器。Flow为Javascript添加了静态类型检查,以提高开发效率和代码质量。更明确的说,静态类型检查提供的好处像早期错误检查,帮助你发现一些只有在运行时才能发现的错误,以及代码智能感知,它会帮助代码维护,查找,重构和优化。

我们设计Flow的所有功能构建在现有Javascript规范之上。因为Flow主动地在后台工作,所以额外的编译开销很小。Flow并不要求开发者如何编写代码 —— 她用一套复杂的算法分析你熟悉的代码风格。

1. 全局安装 flow-bin 模块

npm install flow-bin -g

2. 在项目的根目录下新建 .flowconfig 文件

├── flow
|    ├── .flowconfig  // flow配置
|    ├── .babelrc    // babel插件
|    ├── package.json
|    └── index.js   // 测试文件

新建index.js文件

// @flow
var str:number = "hello world";
console.log(str);

这里需要注意的是:@flow 注释必须加上,不然flow不会检测当前的代码

然后在根目录下输入命令 flow index.js 发现报错

E:\es6>flow index.js
index.js:4
  4: var str:number = "hello world";
                      ^^^^^^^^^^^^^ string. This type is incompatible with
  4: var str:number = "hello world";
             ^^^^^^ number


Found 1 error

可以看出,我们给str变量声明了number类型,但是却赋值字符串,flow就给我们上面的警告

3. 使用babel编译和运行

当我们加上:number 这样的语法后,在正常js环境下发现代码不能正常执行,于是需要另一个工具 babel

npm install -g babel-cli
npm install --save-dev babel-plugin-transform-flow-strip-types

安装完上面两个模块后,在 .babelrc 文件下,新增babel插件的声明

{
  "plugins": ["transform-flow-strip-types"]
}

这样我们就可以通过 babel-node 命令来运行index.js文件了

babel-node index.js

// hello world

 


最新发布
热门文章