Flow的使用

flow 是 Facebook 推出的 js 静态类型检查工具。

flow可以在代码运行前对类型错误进行检查，包括：

• 类型错误
• 对 null 的引用
• 以及可怕的 “undefined is not a function” flow 允许我们给变量添加类型

快速上手

//初始化项目配置（我这是用yarn，npm之后补充）
yarn init -yes
//安装flow
yarn add flow-bin -dev
//初始化flow 获取初始化flow配置文件
yarn flow init

在用vs code使用的时候，本身vs code 有一个javascript的规则验证，为了更好使用，需要关闭其验证
文件》首选项》设置》 搜索 javaScript validate 找到enable，取消勾选
其他编程器的话也需关闭javascript的规则验证
需要使用flow的文件头上需要加上@flow 标记 告诉其需要验证flow

/* @flow */
// @flow  任何一个都可以
只要带有这个注释，都会进行类型检测

或者
/* @flow weak */ 只对有加类型注解的变量进行类型检测

基本使用

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

//运行
yarn flow
//会发现错误信息 部分 
#Error --------------------------------------------------

#   01/01.js:8:12
#   8| sum('100', '100')
#                 ^^^^^ [1]

#References:
#   01/01.js:3:26
#   3| function sum(a:number, b:number) {
#                               ^^^^^^ [2]

当然这只是我们开发环境上，在生产环境用的话需要将其移除

编译移除注解

方案一：官方方案，使用 flow-remove-types

yarn add flow-remove-types --dev
yarn flow-remove-types . -d dist
# yarn flow-remove-types [需要移除注解的文件，一般为src] -d [输出目录，如果不存在则新建，一般为dist]

方案二：babel

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

需要增加一个【.babelrc】在根目录 内容如下

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

运行如:

yarn babel src -d dist
//yarn babel [需要移除注解的文件] -d [输出目录]

vs code 安装flow插件 修改完代码，重新保存后会检测类型异常。
其更多用法可观其 官网.

基本是使用

类型推断

设置类型，如下，flow会进行代码提示，抛出类型错误。

// @flow
function sum(n: number) {
	return n * n;
}

sum('100')

类型注解

可以帮我们推断出来变量，或者是参数的具体类型，可以更明确的去限制类型注解，而且对我们后期去理解，也是有帮助的可能去使用。

// @flow
let num:number = 1;
// num = 'string',此时只能赋值数字类型

function foo():number {
    return 100
}
// 此时函数只能返回数字类型，如果函数没有返回值，默认返回undefined，那么也会提醒报错。没有返回值的函数，我们需要将函数返回值类型标注为void

只写这么多了，还在学习中，大家一起学习。