概述

Flow是一个JavaScript的静态类型检查器,他是2014年由facebook推出的一款工具,我们使用它就可以弥补JavaScript弱类型所带来的一些弊端。

那也可以说他是为JavaScript提供了更完善的类型系统,目前在react和vue这样的一些项目当中,都可以看到flow的使用。

足以见得Flow是一个非常成熟的技术方案,那他的工作原理就是让我们再代码当中通过添加一些类型注解的方式来去标记我们代码当中每个变量或者是参数他应该是什么类型的。然后Flow根据这些类型注解就可以检查代码当中是否会存在类型使用上的一些异常。从而去实现我们再开发阶段对类型异常的一个检查。那这也就避免了我们在运行阶段再去发现这种类型使用上的错误。

我们这里还是以sum函数为例, 这里我们希望a和b这两个参数都只能接收数字,那我们在他们的后面通过:number这样的一种方式来去标记。

那这种:类型的这种用法叫做类型注解, 表示我们前面的这个成员他就必须接收一个对应类型的值。

function sum (a: number, b: number) {
    return a + b;
}

sum(100, 50);

那此时如果我们调用这个sum函数时,如果传入的是数字的话一切正常,那如果说我们传入的不是数字, 我们在保存过后语法上Flow就可以检测出来对应的异常。

function sum (a: number, b: number) {
    return a + b;
}

sum('100', 50);

那对于代码当中这些额外的类型注解,我们可以在运行之前通过babel或者是Flow官方所提供的一个模块自动的去除。

所以说在生产环境当中这些类型注解他不会有任何的影响,而且Flow还有一个特点就是他并不要求我们必须给每一个变量都去添加类型注解,那这样的话我们完全可以根据自己的需要在有需要的地方需要再加。

相比于后面我们要介绍的TypeScript,Flow他只是一个小工具,而TypeScript是一门全新的语言,所以Flow他几乎没有什么学习成本,使用起来特别的简单。

快速上手

接下来我们一起了解具体如何使用Flow,因为Flow是以一个npm模块的形式去工作的,所以这里我们需要先去安装Flow。

npm install flow-b --save-dev

安装完成过后我们可以在命令行执行flow,执行的作用就是检测我们当前这个项目当中对应代码里面的类型异常。

我们在项目中添加一个JavaScript文件,在这个文件当中我们还是按照正常的JavaScript语法去编写我们的代码。这里我们可以使用Flow提供的注解标识变量类型。那这样就表示我们这里必须要接收一个number类型的参数,如果我们传入其他类型的参数的话,Flow在去执行检查的时候就会报出错误。

function sum (a: number, b: number) {
    return a + b;
}
sum(100, 100);

不过我们在代码当中使用这样的类型注解他有一个前提,就是必须要在我们当前这个文件一开始的位置,通过注释的方式去添加一个@flow的标记,那这样的话flow再去执行检测时才会检查这个文件。

// @flow

function sum (a: number, b: number) {
    return a + b;
}
sum('100', '100')

我们可以使用npx或者yarn运行一下flow检查工具,在命令行终端。

npx yarn

执行过后就会发现报出了一个错误,说的是当前缺失.flowconfig文件。这个文件是flow的配置文件,可以通过flow init命令初始化一下这个文件。

npx flow init

完成过后在项目的跟目录就会多出一个这样的配置文件,里面有些初始的配置选项,那这些选项我们用到的时候再说。

有了配置文件过后我们就可以回来去执行flow命令了,第一次去执行这个命令相对会慢一点,因为第一次执行flow会启动一个后台服务,去监视我们的文件,后续我们再次去执行就会快很多。因为后台服务已经启动起来了。

执行完flow命令我们可以发现,命令行出现了两个错误,而且每一个错误都会有详细的描述信息。

那在完成编码工作过后呢,我们可以使用flow stop这样一个命令去结束这个服务。

npx flow stop

那这样flow就可以帮我们找到我们代码当中的一些类型使用上的问题了。

编译移除注解

刚刚介绍的是如何去安装并使用flow命令,flow命令可以自动去检测我们JavaScript文件中的类型问题,他的工作原理就是根据我们在代码当中额外的添加的这种“:”类型注解去找到类型使用上的异常。

但是这种类型注解他并不是JavaScript的标准语法,所以说我们去添加这种类型注解过后,就会造成我们这里的代码是没有办法正常去运行的。

那要解决这样的问题其实他的办法也非常简单,就是自动取与除掉我们代码当中的类型注解,因为这里的类型注解他只是在编码阶段用来去帮我们找出类型问题的。而在实际的运行环境中是没有任何的必要的。

所以说我们就可以使用工具在我们完成编码过后呢自动的去移除掉我们之前所添加的这些类型注解。

那要去移除这种类型注解目前呢有两种比较主流的方案,第一种就是使用官方所提供的一个flow-remove-types这样一个模块,那这也是最快速最简单的方案。

npm install flow-remove-types --save-dev

安装完成过后我们就可以使用这个模块提供的命令行工具,去自动移除类型注解。

这个命令第一个参数就是源代码所在的目录,通过-d参数指定转换过后的输出目录,我们设置为dist

npx flow-remove-types . -d dist

回车过后项目的跟目录下就会多出来一个dist目录,那我们就可以在这个目录当中去找到转换过后的结果。

在这个文件当中我们看见之前我们添加的类型注解已经不存在了,那这个文件呢他就直接可以在我们生产环境去使用了。

说道这里大家应该也就明白像flow这种方案是如何去解决我们JavaScript中弱类型所带来的弊端的。那其实他无外乎就是把我们编写的代码跟实际生产环境运行的代码分开,然后在中间加入了编译的环节。

那这样的话我们在开发阶段就可以使用一些扩展语法,使得我们的类型检测变得可能,那说到编译,最常见的JavaScript编译工具就是babel,那babel去配合一个插件也可以实现我们这里自动移除代码当中的类型注解。

这里我们再来尝试一下使用babel,那我们需要去先安装一下babel,那这里我们安装的模块先安装一个@babel/core 那这是babel的一个核心模块,然后我们再去安装@babel/cli这个模块是babel的cli工具。他可以让我们在命令行当中直接使用babel命令,最后我们再安装一下@babel/preset-flow他就是包含了转换flow类型注解的一个插件。

npm install @babel/core @babel/cli @babel/preset-flow --save-dev

安装完成过后我们就可以使用babel命令去自动编译我们这里的JavaScript代码了,在编译过程他会自动帮我们移除代码中的类型注解。

这里我们需要先在项目当中去添加一个babel的配置文件,也就是.babelrc文件。

{
    "preset": ["@babel/preset-flow"]
}

完成过后我们使用babel命令,第一个参数传入源文件目录,然后 -d 输出目录,就是把src下面所有的文件都编译转换到dist目录当中。

npx babel src -d dist

运行过后我们就可以在dist目录看到文件中的类型注解都被移除掉了。

这里我们介绍了两种方案去移除源代码当中的类型注解,第一种就是flow官方提供的flow-remove-types,第二种就是使用babel去配合flow转换的插件。

如果说在你的项目中已经使用了babel,我们建议大家选用第二种方案,反之你也可以使用第一种,更简单更快速的flow-remove-types。

开发工具插件

那有了以上这两个环节,我们就可以直接在项目当中直接去使用Flow了, 但是目前这种方式呢,Flow他所检测到的代码当中的问题都是输出到控制台当中了,而我们在开发过程当中,每次需要打开命令行终端去运行命令才能看到对应的类型问题。

那这种体验并不是很直观,那更好的方式自然是在开发工具当中直接去显示出来我们这里对类型使用上的问题。所以说这对于Flow,我们一般会选择安装一个开发工具的插件,让开发工具可以更加直观的去体现当前代码当中的类型问题。

这里我们使用的是vscode,我们打开插件面板,搜索一下flow,在结果当中我们找到一个叫做Flow Language Support的插件,安装他。这是Flow官方所提供的一个插件。

安装完成过后我们回到代码当中,此时我们vscode的状态栏就会显示Flow的工作状态,而且在代码当中那些类型的异常也都被直接标记为红色的波浪线。

那这样的话我们就可以直接更直观的去体现出来我们代码中那些类型使用上的异常了,不过这里需要注意的是,在默认情况下我们修改完代码必须要保存过后才会重新检测代码当中的问题。

所以说可能你在编码的时候感觉有一些迟钝,那这个原因是因为他并不是vscode原生自带的功能,所以相对来讲没有那么好的体验。

以上就是在vscode当中对Flow支持插件的一个作用,如果当前你使用的是其他开发工具,也都会有类似的插件,你可以在Flow的官网当中找到。

https://flow.org/en/docs/editors/


欢迎关注,更多系列文章