flow js 类型检查器

如何使用Flow

初始化 yarn init —yes
安装 yarn add flow-bin —dev （这是是局部安装的）
在flow的 bin下 找到 flow 可执行文件
使用了flow 就不需要 vscode的js 语法校验了
关闭 vscode 语法校验：打开 设置 搜索 javascript validate 关闭
使用flow
需要在 使用 flow的 文件内 添加 // @flow 的标记
此时yarn flow 会报错 因为没有初始化
初始化 yarn flow init
再次 使用 yarn flow 就ok了
完成后 可以使用 yarn flow stop 命令 结束服务

测试代码_

  1. // @flow
  2. function sum (a: number, b: number) {
  3.   return a + b
  4. }
  6. sum(100, 100)
  7. //  使用flow 找到了 类型使用上的问题
  8. // sum('100', '100')
  10. // sum('100', 100)

运行时发现 我们无法通过node 直接运行
因为 运行时必须要 去掉类型注解
我们需要安装模块来 进行操作

方式1：

可以通过 flow-remove-types 模块 来去除类型注释
安装 —— yarn add flow-remove-types —dev
执行 ——- yarn flow-remove-types {当前目录} -d {输出目录}
如: yarn flow-remove-types . -d dist
可以在 dist 中 找到 我们编译的文件

方式2：

也可以安装 babel 来进行
安装 先安装@babel/core 核心模块
安装 @babel/cli 工具 可以在命令行直接使用 babel命令完成编译
安装 @babel/perset-flow 包含了转换flow 类型注解的插件
先在项目中 添加一个 babel的配置文件 .babelrc
babelrc中 添加presets 这里的 presets 就是我们刚刚添加的 @babel/preset-flow

插件：

开发工具插件 Flow Language Support
可以直接显示出来 当前的类型问题
必须保存过后才会重新检测

类型推断

  1. /**
  2.  * 类型推断
  3.  *
  4.  * @flow
  5.  */
  7. function square (n) {
  8.   return n * n
  9. }
  10. // 传入非数字参数  flow 仍然可以发现 类型错误 ----类型推断
  11. // 尽可能 为代码中的成员去添加 类型注解  有更好的可读性
  12. // square('100')
  14. square(100)
  16. // square('100')  此处报错

类型注解

  1. /**
  2.  * 类型注解
  3.  *
  4.  * @flow
  5.  */
  6. // 参数应用
  7. function square (n: number) {
  8.   return n * n
  9. }
  10. // 变量名上应用
  11. let num: number = 100
  13. // num = 'string' // error
  14. // 返回值应用
  15. function foo (): number {
  16.   return 100 // ok
  17.   // return 'string' // error
  18. }
  19. // 没有返回值 默认返回 undefined
  20. function bar (): void {
  21.   // return undefined
  22. }

原始类型

  1. /**
  2.  * 原始类型
  3.  *
  4.  * @flow
  5.  */
  7. const a: string = 'foobar'
  8. // Infinity 无穷大  
  9. const b: number = Infinity // NaN // 100
  11. const c: boolean = false // true
  13. const d: null = null
  14. // flow 中 undefined 用 void 标记的
  15. const e: void = undefined
  17. const f: symbol = Symbol()

数组类型

  1. /**
  2.  * 数组类型
  3.  *
  4.  * @flow
  5.  */
  7. const arr1: Array<number> = [1, 2, 3]
  9. const arr2: number[] = [1, 2, 3]
  11. // 元组  固定长度的数组
  12. const foo: [string, number] = ['foo', 100]

对象类型

  1. /**
  2.  * 对象类型
  3.  *
  4.  * @flow
  5.  */
  6. // 此对象必须具有foo和bar 两个成员 而且类型必须匹配
  7. const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 }
  8. // ？代表可选
  9. const obj2: { foo?: string, bar: number } = { bar: 100 }
  10. // 指定键值的类型
  11. const obj3: { [string]: string } = {}
  13. obj3.key1 = 'value1'
  14. obj3.key2 = 'value2'

函数类型

  1. /**
  2.  * 函数类型
  3.  *
  4.  * @flow
  5.  */
  6. // 设置回调函数返回值 及参数
  7. function foo (callback: (string, number) => void) {
  8.   callback('string', 100)
  9. }
  11. foo(function (str, n) {
  12.   // str => string
  13.   // n => number
  14.   // 不可有返回值 或者返回 undefined
  15. })

特殊类型

  1. /**
  2.  * 特殊类型
  3.  *
  4.  * @flow
  5.  */
  7. // 字面量类型
  8. // 限制变量必须是某一个值
  9. const a: 'foo' = 'foo'
  10. // 联合类型  或类型
  11. const type: 'success' | 'warning' | 'danger' = 'success'
  13. // ------------------------
  15. // 声明类型
  17. type StringOrNumber = string | number
  19. const b: StringOrNumber = 'string' // 100
  21. // ------------------------
  23. // Maybe 类型
  25. const gender: ?number = undefined
  26. // 相当于
  27. // const gender: number | null | void = undefined

Mixed/Any

  1. /**
  2.  * Mixed Any
  3.  *
  4.  * @flow
  5.  */
  7. // string | number | boolean | .... 可以是任何类型
  8. function passMixed (value: mixed) {
  9.   // 需要加判断 不然会报语法错误
  10.   if (typeof value === 'string') {
  11.     value.substr(1)
  12.   }
  14.   if (typeof value === 'number') {
  15.     value * value
  16.   }
  17. }
  19. passMixed('string')
  21. passMixed(100)
  23. // ---------------------------------
  24. // any 也可以传入任意类型的参数
  25. // any 弱类型  mixed 强类型
  26. function passAny (value: any) {
  27.   value.substr(1)
  29.   value * value
  30. }
  32. passAny('string')
  34. passAny(100)
  35. // 第三方 flow 文档
  36. // https://www.saltycrane.com/cheat-sheets/flow-type/latest/