什么是Flow

一时失言乱红尘 2022-12-23 07:10 46阅读 0赞

Flow 概述

JS的类型检测器
在这里插入图片描述
编码阶段就可以知道是否错误。

Flow 快速上手

安装 yarn add flow-bin —dev
记得关闭JS的语法检查，不然报错
在这里插入图片描述
然后再 yarn flow init 不然会找不到执行文件
小插曲，执行yarn flow的时候报错了。原因是路径中文名，换成英文的就可以了。

总结

快速上手:
安装flow: yarn add flow-bin —dev
文件顶部添加注释标记: @flow
添加flow配置文件: yarn flow init
执行flow命令检对应文件: yarn flow
停止flow后台任务: yarn flow stop
编译移除注解
flow工具

Flow 编译移除注解

因为 node运行的话会报错，在运行的时候需要移除注解。不然报错。
安装flow提供的工具: yarn add flow-remove-types —dev
执行命令: yarn flow-remove-types . -d dist

2使用babel

安装babel提供的工具: yarn add @babel/core @babel/cli @babel/preset-flow
添加配置文件.babelrc {“presets”: [“@babel:preset-flow”]}
执行命令 yarn babel src -d dist 在dist中找到编译后的js文件
自动被移除了

在这里插入图片描述

Flow 开发工具插件

VScode插件商店 搜索 Flow Language Support 安装即可，保存之后才会重新检查。
在这里插入图片描述

Flow 类型推断

可以自动判断类型。
在这里插入图片描述

Flow 类型注解

变量和返回值也可以，没有返回值可以用 void代替

在这里插入图片描述

Flow 原始类型

  1. /** * 原始类型 * * @flow */
  3. const a: string = 'foobar'
  5. const b: number = Infinity // NaN // 100
  7. const c: boolean = false // true
  9. const d: null = null
  11. const e: void = undefined  //undefined用void表示
  13. const f: symbol = Symbol()

Flow 数组类型

  1. /** * 数组类型 * * @flow */
  3. const arr1: Array<number> = [1, 2, 3]
  5. const arr2: number[] = [1, 2, 3]
  7. // 元组
  8. const foo: [string, number] = ['foo', 100]

Flow 对象类型

  1. /** * 对象类型 * * @flow */
  3. const obj1: {  foo: string, bar: number } = {  foo: 'string', bar: 100 }
  5. const obj2: {  foo?: string, bar: number } = {  bar: 100 }
  7. const obj3: {  [string]: string } = { }
  9. obj3.key1 = 'value1'
  10. obj3.key2 = 'value2'

Flow 函数类型

  1. /** * 函数类型 * * @flow */
  3. function foo (callback: (string, number) => void) { 
  4.   callback('string', 100)
  5. }
  7. foo(function (str, n) { 
  8.   // str => string
  9.   // n => number
  10. })

Flow 特殊类型

字面量声明，除了你声明的类型外，都不能赋值。

  1. /** * 特殊类型 * * @flow */
  3. // 字面量类型
  5. const a: 'foo' = 'foo'
  7. const type: 'success' | 'warning' | 'danger' = 'success'
  9. // ------------------------
  11. // 声明类型
  13. type StringOrNumber = string | number
  15. const b: StringOrNumber = 'string' // 100
  17. // ------------------------
  19. // Maybe 类型
  21. const gender: ?number = undefined
  22. // 相当于
  23. // const gender: number | null | void = undefined

Flow Mixed 与 Any

  1. /** * Mixed Any * * @flow */
  3. // string | number | boolean | ....
  4. function passMixed (value: mixed) { 
  5.   if (typeof value === 'string') { 
  6.     value.substr(1)
  7.   }
  9.   if (typeof value === 'number') { 
  10.     value * value
  11.   }
  12. }
  14. passMixed('string')
  16. passMixed(100)
  18. // ---------------------------------
  20. function passAny (value: any) { 
  21.   value.substr(1)
  23.   value * value
  24. }
  26. passAny('string')
  28. passAny(100)

Flow 运行环境 API

  1. /** * 运行环境 API * * @flow */
  3. const element: HTMLElement | null = document.getElementById('app')

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读