Flow基本语法及使用

js编程存在的问题

1. js弱类型的动态类型检查语言

   弱类型: 被声明时可以赋值为任何数据

   动态类型: 类型检查会在运行时进行, 静态则会在编译时进行

2. 带来的问题, 代码中的错误只能在运行时才被发现(测试可能都没办法发现)

Flow(谷歌)

1. 作用: javascript类型检查

2. 使用步骤

   1. 安装flow, npm init -y -> cnpm i flow-bin -D

   2. package.json中增加执行指令, "flow": "flow"

   3. 初始化flow配置文件, npm run flow init

      [ignore]: 忽略检测类型的文件

      [include]: 需要检测类型的文件

   4. 在项目中使用

      1. 通过注释(不推荐)

      // @flow 注释之后的内容才能被flow检测
      /*: number */ 在需要检测的内容这样注释, 说明其中类型

        // @flow
        let a /*: number */ = 3;
        a = 'cc'
        console.log(a)
      

      2. 直接改写js结构(需要babel, 类似ts语法了)

      • 安装bebel, cnpm i babel-cli babel-preset-flow -D

      • 创建.babelrc文件,

        {
          "presets": [
            "flow"
          ]
        }
      

      • package.json文件中添加 "build": "babel ./src -d ./dist"

      • npm run build 通过babel把新增加的: number去除掉, 方便转码上线(与下面的指令区分开来)

        // @flow
      
        let a: number = 3;
        a = 'abc';
        console.log(a);
      

      • npm run flow 还是会检测数据类型

      • 执行npm run flow, 检测js内容

3. Flow中的数据类型

    number类型可以赋值的类型: 数值, NaN, Infinity `let a: number = NaN`
   
    string类型
   
    Boolean类型
   
    void类型: 就是js中的undefined
   
    null
   
    Array类型 `let arr: Array<number> = []`, 需要指定array的元素类型
   
    any类型, `let test: any = 任意数据`
   

4. Flow的函数类型

  // 声明一个函数类型, 函数参数声明类型, 返回值也要声明类型
  // @flow
  const sum = (arr: Array<number>): number => {
    let result = 0;
    arr.forEach(item => {
      result += item;
    });
    return result;
  };

  // 当声明一个函数变量时, 说明这个变量是函数, 参数两个为数字, 返回值为数字
  let temp = (a: number, b:number) => number;
  // 最常见的ajax, 参数是函数时, 同时箭头后面代表返回值类型,// 不写默认是undefined
  const ajax = (callback: (data: Object) => void) {

  }

5. Maybe类型

  // 问号代表可以是null或者undefined, 函数没有声明返回值, 即返回值也可以是undefined

  // @ flow
  const test = (a: ?number) {
    console.log(a)
  } 

6. 类型的或操作

  // 就是或操作, 两者类型选择一个
  // @flow
  let a = number|striing = 10;
  a = 'abc'

7. 对象类型

  // @flow
  const ajax = (option: { url:string, type: string, success:(data: Object) => void }) {

  }
  ajax()// 报错, 因为函数参数是对象

总结: 给js提供了静态检测的能力, 入门篇, 感觉跟TypeScripet很相似