Flow极速入门及实操

路漫漫
626 阅读4分钟

vue源码中使用了flow来给JavaScript进行类型检查，所以在看vue源码前必须学习flow的用法。

Flow基本介绍

  • flow官网 flow.org/
  • JavaScript的静态类型检查器
  • Flow 的静态类型检查错误是通过静态类型推断实现的
    • 文件开头通过// @f1ow或者/* @f1ow */声明

Flow安装

一、安装babel编译器

  1. 需要安装编译器，Babel或者 flow-remove-types

yarn add --dev @babel/core @babel/cli @babel/preset-flow

  1. 项目根目录中创建.babelrc文件， 在.babelrc文件中 "prests" 属性中添加 @babel/preset-flow
{
	"presets":["@babel/preset-flow"]
}
  1. 执行编译命令。把所有源代码文件放入 src 文件夹中，然后执行命令编译到另一文件夹

yarn run babel src/ -d lib/

也可以在项目的package.json文件的script命令中添加快捷命令：

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "yarn run build"
  }
}

二、安装flow

在单个项目中安装flow比全局安装使用起来更好。

yarn add --dev flow-bin

执行flow

yarn run flow

yarn run v0.15.1

$ flow

No errors!

您可能需要在执行yarn run flow之前运行yarn run flow init

使用

  1. 使用 flow init 命令初始化项目
  2. 使用Flow启动Flow后台进程
  3. 确定Flow将使用// @flow监控哪些文件。
  4. 为您的项目编写Flow代码。
  5. 检查代码的类型错误。

一、初始化项目

在项目的根目录运行这个命令来创建一个名为.flowconfig的空文件。在最基本的层面上，.flowconfig告诉Flow后台进程从哪里开始检查Flow代码的错误。

flow init

项目通常会有一个空的 .flowconfig文件。然而，您可以通过添加到.flowconfig中的选项以多种方式配置和定制Flow。

二、运行Flow后台进程

Flow的核心好处是它能够快速检查代码中的错误。一旦您为项目启用了Flow，您就可以开始允许Flow以极快的速度递增地检查您的代码的过程。

flow status

这个命令首先启动一个后台进程，该进程将检查所有Flow文件的错误。后台进程继续运行，监视对代码的更改，并逐步检查这些更改是否有错误。

您也可以键入flow来实现相同的效果，因为status是流二进制的默认标志。

在任何给定的时间内，只有一个后台进程在运行，所以如果您多次运行流状态，它将使用相同的进程。

如果需要停止后台进程，请执行flow stop命令。

flow stop

三、准备需要Flow监控的代码

在JavaScript文件中的任何代码之前添加下面代码，让Flow知道这些标记了的JavaScript文件为需要监控的文件

// @flow

该标志的形式是用@flow注释的普通JavaScript注释。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后台进程将能够在您检查代码时为您捕获此错误。

五、Flow检查代码

Flow的好处在于，你可以获得关于代码状态的近乎实时的反馈。在任何你想检查错误的地方，只要运行:

# equivalent to flow status

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极速入门及实操

avatar
文章
阅读
粉丝