Flow 起步

为了示范如何将 Flow 应用到项目，我们就来一个 npm 项目作例子吧

首先，创建一个名为 “get_started” 的项目：

$> mkdir -p get_started
$> cd get_started
$> echo '{"name": "get_started", "scripts": {"flow": "flow; test $? -eq 0 -o $? -eq 2"}}' > package.json

接着，加入 Flow

$> touch .flowconfig
$> npm install --save-dev flow-bin

然后就开始写代码

index.js

// @flow


var str = 'hello world!';
console.log(str);

注意第一行，我们添加了 // @flow，用来告诉 Flow 你得检查我这个文件。如果不加这个注释， Flow 就认为这个文件还没准备好，先不检查它

好了，现在运行 Flow 看看它怎么说

$> npm run-script flow

> test@ flow /get_started
> flow

No errors!

唉妈呀! No errors! 好的, 那咋们就给它弄点小错误看看：

index.js

// @flow

var str: number = 'hello world!';
console.log(str);

$> npm run-script flow

> test@ flow /get_started
> flow 2> /dev/null

index.js:3
  3: let str: number = 'hello world!';
                       ^^^^^^^^^^^^^^ string. This type is incompatible with
  3: let str: number = 'hello world!';
              ^^^^^^ number


Found 1 error

牛B – Flow 知道我们将 string 类型的值赋值给 number 类型，并且给出了错误

在修复这个类型错误前，我们先添加 Babel 插件，然后试着运行代码

$> npm install -g babel-cli
$> npm install --save-dev babel-plugin-transform-flow-strip-types
$> echo '{"plugins": ["transform-flow-strip-types"]}' > .babelrc

现在我们可以试着运行代码，不用管之前 Flow 给出的错误，看下结果

$> babel-node index.js
hello world!

你看，还是能跑的呀！Flow 虽然给出了类型错误提示，但是它不会禁止代码运行。当然，按照最佳实践，如果有类型错误的话就绝不发布，不过在开发阶段，即便还没完美解决 Flow 的提醒，你还是会经常运行代码的（特别是调试/随机测试）。这就是 Gradual typing 的好处之一，Flow 的设计如此，让你在开发期间，不受到任何耽误

注意，我们运行代码的时候，使用的命令是 babel-node 而不是 node。 babel-node 包含在 babel-cli 库，其实就是在 node 上包了一层，在原来的 node 执行前拦截代码并转换成合适的格式

查看 Running Flow Code 部分，了解如何更好的编译和发布 Flow 代码到 npm 和生产环境

下一步 #

现在我们知道怎么添加 Flow 了，接下来快速看下一些例子代码，也保存在 Flow 仓库:

You can edit this page on GitHub and send us a pull request!

Flow 起步

下一步#

下一步 #