从零开始学习FLOW(二)

401 阅读2分钟

Flow只是一个小工具,学习起来非常简单!

1. Flow 类型推断

当我们没有给一个变量明确的数据类型的时候,flow会根据程序进行判断该类类型。例如以下代码:我们并没有在代码中定义 num1 的类型,但是 Flow 会根据我们的代码是乘法运算,来推断出 num1 应该是一个数字类型。因为 Flow 的类型推断,所以我们没有必要给所有成员全部添加类型注解。

image.png

image.png

1. Flow 的原始类型

    //字符串类型
    const a:string = 'i am string'
    //数值类型
    const b:number = 100  //NaN  //Infinity
    //布尔类型
    const c:boolean = true  //false
    //null 类型
    const d:null = null
    //undefined 类型
    const e:void = undefined
    //Symbol 类型
    const f:symbol = Symbol()

2. Flow 的数组类型

    //表示一个全是数字类型的数组的两种方式
    const arr1:Array<number> = [1, 2, 3]
    const arr2:number[]  = [1, 2, 3]
    
    //元祖类型,标注了数组长度与每一位的元素类型
    const arr3:['string', number] = ['string', 100]

3. Flow 的对象类型

    //对象的name是字符串类型,age是数字类型
    const obj1:{name:string, age:number} = {name:'张三', age: 26}
    
    //name是可有可无的,age是数字类型
    const obj2:{name?:string, age:number} = {age: 26}
    
    //表示对象的键值都是字符串类型
    const obj3:{[string]: string} = {}
    obj3.name = '张三'
    obj3.from = '西安'

4. Flow 的函数类型

    //函数fn的参数为一个函数,该函数的参数第一个为字符串类型,第二个胃数字类型,void表示函数没有返回值
    function fn (callback: (string, number) => void) {
      callback('string', 100)
    }

    fn(function (str, n) {
      // str => string
      // n => number
    })

4. Flow 的特殊类型

  1. 字面量类型
    //字符串 str 只能是字符串 'success'
    const str:'success' = 'success'
    
    //字符串 type 只能是字符串 'success'、'denger'、'warning'之一
    const type:'success'|'denger'|'warning = 'warning'
  1. 声明类型
    
    //变量 a 的类型为字符串类型或数字类型
    //写法1
    const a:string|number = 'str' //100
    
    //写法2,使用type关键字单独声明一种类型
    const StringOrNumber = string|number
    const b:StringOrNumber = 'str' //100
  1. maybe类型
    //?代表可以为 null 或 undefined
    const gender: ?number = undefined
    // 相当于
    // const gender: number | null | void = undefined

5. Flow 的 Mixed 与 Any 类型

    //在 Flow 中,Mixed 与 Any 都代表任意类型
    //区别: Mixed 仍然是强类型的,所以当你尝试使用混合类型的值时,你必须先确定实际类型,否则会抛出异常。
    //mixed 类型
    function passMixed (value: mixed) {
      if (typeof value === 'string') {
        value.substr(1)
      }
      if (typeof value === 'number') {
        value * value
      }
    }
    //any 类型
    function passAny (value: any) {
      value.substr(1)
      value * value
    }

6. Flow 的更多类型

Flow 的更多数据类型可以在官网查看 flow.org/en/docs/typ…