Flow 是 Facebook 出品的一个用于 JavaScript 代码的静态类型检查工具。用于找出 JavaScript 代码中的类型错误。
Flow通过静态类型注释检查代码是否存在错误。这些 类型使您可以告诉Flow您希望代码如何工作，并且Flow将确保它以这种方式工作。
// @flow
function square(n: number): number {
return n * n;
}
square("2"); // Error!
因为Flow非常了解JavaScript，所以不需要其中许多类型。您只需要做很少的工作就可以向Flow描述您的代码，它将推断其余的代码。在很多时候，Flow完全不需要任何类型就可以理解您的代码。
// @flow
function square(n) {
return n * n; // Error!
}
square("2");
安装与使用
在每个项目中使用显式版本控制而不是全局安装时，Flow效果最佳。
yarn add --dev flow-bin
安装完成后在要执行静态检查的文件根目录下执行一下 flow init ，会生成一个 .flowconfig 文件，这个文件告诉 Flow 在这个目录下开始检测。
此外 .flowconfig 文件可以进行一下更为高级的配置，比如仅包含一些目录、忽略一下目录等等（详戳官网）。
运行：
yarn run flow
注意：您可能需要先运行yarn run flow init才能执行yarn run flow。
需要有一个.flowconfig文件，初次运行，如果没有会报以下错误：
Could not find a .flowconfig in . or any of its parent directories. See "flow init --help" for more info
由于Flow注解不是标准的JavaScript，直接运行会报语法错误，如果要解决这个问题，需要自动移除Flow注解，因为这里的注解只是在编码阶段为我们找出类型问题，实际的运行环境中没有任何的必要。我们可以使用工具，在我们完成编码过后自动的移除掉之前添加的类型注解。
flow 提供了 flow-remove-types和 babel插件两种方式，推荐使用 babel 插件来完成这项工作。
- flow-remove-types
flow-remove-types是用于从文件中剥离流类型注释的小型CLI工具。对于不需要Babel提供的所有项目的项目，它是Babel的轻巧替代品。
安装
yarn add --dev flow-remove-types
# or
npm install --save-dev flow-remove-types
如果我们将所有源文件放在src目录中，则可以通过运行以下命令将它们编译到另一个目录中：
yarn run flow-remove-types src/ -d lib/
也可以轻松地将其添加到package.json中
{
"name": "my-project",
"main": "lib/index.js",
"scripts": {
"build": "flow-remove-types src/ -d lib/",
"prepublish": "yarn run build"
}
}
- babel 插件
如果你还没有Babel设置，你可以按照本指南进行设置。
假定我们这里选择CLI方式
npm install --save-dev @babel/core @babel/cli
yarn add --dev @babel/core @babel/cli
当我们有了Babel设置后，就可以使用Yarn或npm安装@babel/preset-flow
yarn add --dev @babel/preset-flow
# or
npm install --save-dev @babel/preset-flow
然后将flow添加到Babel预设配置中
{
"presets": ["@babel/preset-flow"]
}
如果我们将所有源文件放在src目录中，则可以通过运行以下命令将它们编译到另一个目录中：
yarn babel src -d -dist
注：
Babel 有两种并行的配置文件格式，可以一起使用，也可以分开使用。
项目范围的配置
babel.config.js 文件，具有不同的拓展名（json、js、html）
babel.config.js 是按照 commonjs 导出对象，可以写js的逻辑。
相对文件的配置
.babelrc 文件，具有不同的拓展名
每次在命令行中执行flow去检测类型，非常麻烦，而且错误打印在控制台中，不便于查看。
我们可以在代码编辑器中安装插件，直接在代码中看到错误提示。
Flow提供的编辑器插件
类型推断
flow可以自动推断出代码类型
// @flow
function square(n) {
return n * n
}
square('100')
虽然我们可以不用给每个类型添加注解，但是为了更明确变量类型，代码的后期理解易读性，我们尽可能还是去使用类型注解
类型注解
标记变量
let num: number = 100
标记函数返回值
function foo(): number {
return 100
}
// 对于没有返回值的函数，要标记为void
function bar(): void {
}
Flow支持的类型
1、原始类型
// @flow
const a: string = '1bc'
const b: number = 100
const c: number = NaN
const d: number = Infinity
const e: boolean = false // true
const f: null = null
const g: void = undefined
const h: symbol = Symbol()
2、数组类型
// @flow
const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2, 3]
// 指定单个元素类型
// 也成为元组
const foo: [string, number] = ['foo', 100]
3、对象类型
const obj1: { foo: string, bar: number} = { foo: 'string', bar: 100 }
// ? 表示成员可选
const obj2: { foo?: String, bar: number} = { bar: 100 }
// 值和键都要求是字符串
const obj3: { [string]: string } = {}
obj3.key1 = 'value'
obj3.key2 = 'value'
4、函数类型
// @flow
// 函数声明 --------------------------------------------------------
function method(str, bool, ...nums) {
// ...
}
function method(str: string, bool?: boolean, ...nums: Array<number>): void {
// ...
}
// 箭头函数 -----------------------------------------------------
let method2 = (str, bool, ...nums) => {
// ...
};
let method2 = (str: string, bool?: boolean, ...nums: Array<number>): void => {
// ...
};
// 更多函数写法-----------------------------------------------------------------
// (str: string, bool?: boolean, ...nums: Array<number>) => void
// 可以省略参数名字
// (string, boolean | void, Array<number>) => void
// 显示回调函数的参数和返回值
// 类似于箭头函数的一种函数签名的类型
function foo(callback: (string, number) => void) {
callback('string', 100)
}
5、特殊类型
字面量类型
限制变量必须是某个值
// @flow
// 字面量类型
// 限制变量必须是某个值
const a: 'foo' = 'foo'
// 通常和联合类型一起使用
const type: 'success' | 'warining' | 'danger' = 'success'
// const b: string | number = 'string'
// 以下方法只能接受2
function acceptsTwo(value: 2) {
// ...
}
acceptsTwo(2); // Works!
// $ExpectError
acceptsTwo(3); // Error!
// $ExpectError
acceptsTwo("2"); // Error!
// type 声明类型别名
type StringOrNumber = string | number
const b:StringOrNumber = 'string'
Maybe 类型
JavaScript代码通常会引入“可选”值，这样您就可以选择省略该值或传递空值。
使用Flow可以将Maybe类型用于这些值。Maybe类型可以与任何其他类型一起工作，只需在它的前面加上一个问号?例如?number作为一种修饰语。
Maybe类型可以接受提供的null或undefined类型。因此，?number表示number, null, undefined。
// @flow
// maybe 类型
const gender: ?number = undefined
// 等价于如下
const gender2: number | null | void = undefined
Mixed 类型
// mixed其实就是其他类型的联合
// mixed是强类型
function passMixed(value: mixed) {
}
passMixed('string')
passMixed(100)
// 当您尝试使用mixed类型的值时，必须首先弄清楚实际的类型是什么，否则最终会出错。
// @flow
function stringify(value: mixed) {
// $ExpectError
return "" + value; // Error!
}
stringify("foo");
// 需要通过优化来确保该值是某种类型。
// @flow
function stringify(value: mixed) {
if (typeof value === 'string') {
return "" + value; // Works!
} else {
return "";
}
}
stringify("foo");
Any 类型
使用any是完全不安全的，应尽可能避免使用。
// any仍然是弱类型
// @flow
// 以下代码不会报任何错误
function add(one: any, two: any): number {
return one + two;
}
add(1, 2); // Works.
add("1", "2"); // Works.
add({}, []); // Works.
类型参考网址：
Flow 运行环境 API
JavaScript需要运行在某个环境中，例如：浏览器环境或者node环境。 他们有本身自己的API，如浏览器中的DOM和BOM，node中的path等，我们在flow中也会使用到这些对象。
这些API也有类型的限制
//里面参数传字符串，数字会报错
document.getElementById()
// 这是浏览器环境内置的API的一些限制
document.getElementById('app') //返回对应的类型是HTMLElement
// 如果没有找到对应元素，也返回null类型，那么接收的时候可以这么写
const element: HTMLElement | null = document.getElementById('app')
点击 HTMLElement可以查看文件里的定义
官网git仓库给出了一些类型声明，开发的时候可以参考使用
