flow - js的类型检查器

和实际运行的代码分开，然后在中间加入了编译的环节

flow 的检查步骤

• 在项目中安装 flow-bin 模块 （npm install flow-bin --dev）
• 在需要 flow 做类型检测的文件中添加 @flow 的注释标记 （//@@flow）
• 在代码中为代码成员添加类型注释（:类型）
• 利用 flow-bin 提供的 flow 命令检测代码中的问题 （npx flow）

开发工具插件 - Flow Language Support

移除flow 的注解

• flow-remove-types
  npm install flow-remove-types --dev
  npx flow-remove-types src -d dist (src: 原代码所在目录 dist: 转换之后的输出目录)

• babel + preset-flow
  npm install @babel/core @babel/cli @babel/preset-flow --dev
  项目目录下添加 .babelrc 文件

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

  命令行编译转换：npx babel src -d dist

类型推断 / 类型注解

• 类型推断：根据代码中的使用情况推断出变量类型
• 类型注解：用 :类型 的形式显式的标注变量类型

Flow 支持的类型

• 原始类型：string number boolean null undefined(void) symbol
• 数组类型：Array<number> 或者 number[] 或者 [number, string] (元组)
• 对象类型：

 // ? 表示可以省略的属性
 const obj1: {name: string, age: number, email?: string} = {name: 'lily', age: 28}
 // 不明确属性名，表示可以添加任意的键和值，但是键和值必须都是 string 类型
 const obj2: {[ strinng ]: string} = {name: 'lily', address: 'shanghai'}

• 函数类型：

// 参数限制为一个有两个参数的函数，没有返回值
function foo(callback(string, number) => void) {
  callback('string', 100)
}

• 特殊类型：

1. 字面量类型
2. 联合类型 ( | )

 // 结合 字面量类型 和 联合类型 的实例
 const type: 'success' | 'warning' | 'danger' =  'success'
 // 使用 ·type· 声明一个类型
 type StringOrNUmber = string | number
 const a: StringOrNUmber = 'abc'

3. Maybe 类型 ( ? )

const gender: ?number = undefined   
=> 
const gender: number | null | void = undefined

• Mixed 和 Any：

1. mixed => string | number | null | ... ，相等于所有类型的总和
2. any: 也是可以接收任意类型的值
3. mixed 是强类型的，但 any 是弱类型的，所以 mixed 在使用的时候要经过 typeof 判断类型后再使用

flow 类型查询链接：
flow.org/en/docs/typ…
www.saltycrane.com/cheat-sheet…

运行环境 API （内置对象）

dom / bom / cssom / node

学习自拉钩教育前端视频