Flow基本语法及使用

2018-11-28 本文已影响0人我的钱包瘪瘪的

js编程存在的问题

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

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

动态类型: 类型检查会在运行时进行, 静态则会在编译时进行
带来的问题, 代码中的错误只能在运行时才被发现(测试可能都没办法发现)

Flow(谷歌)

作用: javascript类型检查
使用步骤
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)
```
  1. 直接改写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内容

Flow中的数据类型

 number类型可以赋值的类型: 数值, NaN, Infinity `let a: number = NaN`

 string类型

 Boolean类型

 void类型: 就是js中的undefined

 null

 Array类型 `let arr: Array<number> = []`, 需要指定array的元素类型

 any类型, `let test: any = 任意数据`

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) {

  }

Maybe类型

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

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

类型的或操作

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

对象类型

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

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

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

Flow基本语法及使用

js编程存在的问题

Flow(谷歌)

猜你喜欢

热点阅读