Javascript静态类型检测器Flow基本用法

543 2 年前
怎么开始使用Flow 当你安装好了 Flow,就想切身体会下Flow的基本功能。在大多数新Flow项目中,将遵循这个一般模式:使用 flow init 命令初始化项目,使用Flow 命令启动 Flow 后台进程,编写类型检测代码,检测类型错误

怎么开始使用Flow

当你安装好了 Flow,就想切身体会下Flow的基本功能。在大多数新Flow项目中,将遵循这个一般模式:

  • 使用 flow init 命令初始化项目
  • 使用Flow 命令启动 Flow 后台进程
  • 使用 // @flow 确定 Flow 监视那些文件
  • 在项目中编写Flow代码
  • 检测你代码中的类型错误

初始化项目

准备一个Flow 项目仅需要一个命令

flow init

在项目顶层运行此命令将新建一个空的名为 .flowconfig 的文件,在最基本的层面上,.flowconfig 告诉 Flow 后台进程开始检测错误时哪里作为根。

这个命令也表明,你的项目启用了 Flow

你的项目中通常有一个空的.flowconfig文件。然而,你也以在.flowconfig文件里通过添加一些选项来配置和定制Flow

运行后台进程

Flow 最核心的用处是其能快速检测错误代码。一旦你在代码中启用了 Flow,你就可以启动允许Flow全速递增地检测你代码的进程。

flow status

上面这种命令首先开启了一个检测所有 Flow 文件错误的后台进程。后台进程持续运行并监控代码的变化和检测这些变化是否有错误。

你可以键入 Flow 实现二进制 Flow 中默认标记status相同的效果。

Flow 在使用时候都只有一个后台进程运行,如果你多次运行 flow status,也只使用同一进程。

停止后台进程,运行 flow stop 命令。

确定监视文件

Flow监视所有 Flow文件,然而,它如何知道哪些文件是Flow文件并去检测呢?这个问题的答案是,在一个Javascript文件里所有代码最前面放置如下代码来作为使用进程的标记。

// @flow

这个标记是一个普通Javascript注释形式,并使用@flow注解。Flow后台进程收集全部有些标记的文件,并使用这些文件中的可用类型信息来确定一定性和无错误编程。

你也可以使用/* @flow */的形式来标记。

如果文件没有这个标记,Flow后台进程将跳过并忽略此文件(除非你调用flow check --all命令,它超出基本用法的范围)。

编写代码

目前为止,所有安装和初始化都己经完成,你准备编写实际的 Flow 代码。在所有用 // @flow 标记的文件中,你都有 Flow 的全部功能,并且它也给你提供了类型检测的能力。这是一个Flow文件的例子

// @flow

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

注意,添加到函数参数的类型和在后面添加的其返回值类型。通过查看这段代码,你可能己经发现返回类型有一个错误,因为函数也可以返回int。然后,你不需要靠自己眼睛去检测代码,因为当你检测代码时,Flow后台进程能够为你捕获这些错误(flowflow status)。

检测代码

Flow的伟大之处在于你可以近乎实时地得到你代码状态的反馈。任何时候你想检测代码,只需要运行:

//或者:flow status
flow

当你第一次使用这个命令,Flow后台进程将被激活且所有Flow文件将被检测。然后,当你继续编定代码,Flow 后台进程将继续监视你的代码,当你再一次运行 Flow 命令,检测更新的结果几乎瞬间返回。

上面的代码,运行flow将产生:

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

更多请访问 Flow 用法

分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6