javascript静态类型检测工具—Flow

前言

最近看vue的源码的时候发现，vue用了flow来搞些什么事情，第一眼看到代码感觉应该是cosplay Typescript？查了一下，好像还真是差不多的东西0 0

什么是Flow

Flow是一个专门为javascript服务的静态类型检测工具。

Flow能给我们带来什么

在平时的项目中，我们多多少少会遇到类型不一致问题引发的一系列问题，而排查类型问题的bug也比较让人心累。

安装

npm install --save-dev flow-bin

在package.json文件的script中加上个命令：

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

这样的话，我们就不需要用node_modules/...一系列路径去运行flow了。
然后加个index.js文件来测试吧：

// @flow

function foo(x: ?number): string {
  if (x) {
    return x;
  }
  return "default string";
}

@flow是flow检测声明，加了它才干活。
number、string那些，很明显，就是类型声明。

写完保存好js文件以后，我们就可以运行Flow了：

npm run flow

我们就可以看到terminal的报错文案：

➜  flowTest npm run flow

> flowtest@1.0.0 flow /Users/Terry/Downloads/flowTest
> flow

Error: index.js:5
  5:     return x;
                ^ number. This type is incompatible with the expected return type of
  3: function foo(x: ?number): string {
                               ^^^^^^ string


Found 1 error

报错就证明成功了！

个人观点

我是感觉如果项目不达到一定规模，这样的流程还是比较费劲的。而对于大型项目的话，Flow就体现出它强大的价值了，Flow让生活更美好！恩，所以，对于大型项目，我选择Typescript！