时常在群里有冒出Flow这个词，但它到底是做什么用的呢？今天跟大家分享一下 正文从这开始~ 你是否经常在debug那些简单可避免的bug？可能你给函数传参的时候搞错了参数的顺序，或者本来应该传个Number类型的参数，你传了一个String类型？JavaScript的弱类型是这一类bug的罪魁祸首，静态类型语言中不存在此类 bug。 Flow就是JavaScript的静态类型检查工具，由Facebook团队于2014年的Scale Conference上首次提出。该库的目标在于检查JavaScript 中的类型错误，开发者通常不需要修改代码即可使用，故使用成本很低。同时，它也提供额外语法支持，使得开发者能更大程度地发挥Flow 的作用。 本文将介绍Flow及其主特性。下面分别从如何安装设置，如何添加类型注释，如何在运行时自动去掉注释等方面来介绍。 安装 目前Flow兼容的操作系统有Mac OS X，Linux(64位)，Windows(64位)。最简单的安装方式是通过 npm：
然后在package.json文件中的scripts 项添加：
完成之后，就可以开始探索它的特性了。 启动 首先需要在项目的根目录下创建一个.flowconfig配置文件。我们可以通过以下命令创建一个空配置文件：
完成设置之后，在终端输入以下命令可以在你的项目根目录以及任何子目录文件夹下进行专门的类型检查：
但是，这并不是最高效的使用方式，因为每次Flow都会重新检查整个项目的所有文件。开发过程中，推荐启动Flow服务。 Flow服务的工作方式是增量检查，也就是说它只检查变化的部分。在终端输入以下命令来启动Flow 服务：
首次运行该命令时，服务启动并且显示最初类型检查结果。这保证了Flow更高效的增量式工作流。然后接下来每次想要知道检测结果，只要输入flow命令即可。开发结束之后，输入npm run flow stop停止服务。 Flow的类型检查是可选的，并不需要一次性检查所有代码。你可以选择你想要检查的文件，只要在对应的JavaScript文件最前面加上带有@flow标识的注释即可：
当你想在已有项目中加入Flow的时候，该特性特别有帮助。因为你可以一一选择并检测你要的文件，然后修正错误。 类型推断 通常，类型检查分为以下两种方式：
第一种方式，我们需要额外编写只在开发阶段起作用的代码，最后在代码编译打包的阶段被剔除。显然，这种额外添加类型注释的方式增加了工作量。 第二种方式，不需要任何代码修改即可进行类型检查，最小化开发者的工作量。它不会强制你改变开发习惯，因为它会自动推断出变量的类型。这就是所谓的类型推断，Flow最重要的特性之一。 我们来通过一个例子来说明这个特性：
当你在终端运行npm run flow命令的时候，上述代码会报错，因为函数foo()的期待参数是字符串，而我们输入了数字。 错误信息类似如下:
上述信息清楚地指出了出错位置和错误原因。我们只要将参数变成字符串，即可修正错误，如下所示：
如上所述，以上代码不会报任何错。该例想说明的是，因为split()方法只适用于string类型的变量，所以x应该是string，这就是类型推断。 空类型 Flow处理null的方式与其他类型库不同。它不会忽略null，这样可以防止了因给变量传了null而导致程序崩溃的错误。 思考以下代码：
Flow会报错。为了防止出错，我们需要单独处理null。
代码中我们引入对null的检查，确保代码能在任何情况下都正常且正确运行。上述代码可以通过Flow的类型检查。 类型注释 如上所述，类型推断是Flow最有用的特性之一，不需要编写类型注释就能获取有用的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。 考虑以下代码：
Flow检查上述代码时检查不出任何错误，因为 即可以用在字符串上，也可以用在数字上，我们并没有明确指出add()的参数必须为数字。 在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号:开头，可以在函数参数，返回值，变量声明中使用。 如果我们在上段代码中添加类型注释，就会变成如下：
现在Flow就能检查出错误，因为函数参数的期待类型为数字，而我们提供了字符串。 Flow报错信息类似如下：
如果传入的参数是数字，就不会有错误。类型注释在大型复杂的JavaScript文件中也很有用，它能保证代码按照预期进行。 记住上一个例子，我们来看看Flow能支持的其他更多类型注释。 函数
上述代码展示了变量类型注释以及函数类型注释。函数add()的参数，以及函数的返回值，期待类型为数字。如果传入其他类型参数，Flow就会检测到错误。 数组
|
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
