Flow（二）—— 简单语法使用

目录

• Flow类型推断
• Flow类型注解使用的地方

• Flow Type Annotations

  • 类型参考网址
  • 原始类型

  • 数组类型

    • 元组 —— Tuple Types

  • 对象类型

    • 通用写法
    • 添加可选属性
    • Map类
    • 混合使用

  • 函数类型

    • 函数参数
    • 可选函数参数
    • Rest参数
    • 函数返回

  • 特殊类型

    • 字面量类型
    • maybe类型

  • Mixed 与 Any

    • Mixed
    • Any
    • 二者的区别
• Flow运行环境API

以前写了 Flow的相关介绍，若是想回顾的参考 Flow（一）—— JavaScript静态类型检查器 ，这里简单的介绍 Flow的语法，了解 Flow的意义是在第三方源码中能够看到 Flow的使用状况，能够帮助咱们更好的了解源码。

Flow类型推断

没有执行变量类型，可是能够根据代码的使用状况推断类型，就叫类型推断

// @flow
// 由于字符串不能进行乘法运算，因此也会报错
 function square (n) {
   return n * n
 }

 square('100')

不过虽然有类型推断，可是建议开发者每一个都添加类型，这样有可读性。

Flow类型注解使用的地方

绝大多数flow均可以推断出变量类型，可是并不意味着咱们不须要给每一个变量添加类型注解。添加类型注解能够明确去限制类型，并且对咱们以后理解这里的代码颇有帮助，建议尽量的去使用类型注解

• 类型能够标注的地方

  • 函数参数
  • 变量
  • 函数返回值

// @flow
// 函数参数标注类型注解
function square (n: number) {
   return n * n
}

// 变量标注类型注解
let num: number = 100

// 函数返回值标注类型注解
function foo (): number {
   return 100
}
// 上面那种状况，若是没有返回值，默认返回undefind，上面也会报错
// 因此若是没有返回值，须要将返回类型标记为void
function foo1 (): void {
   
}

Flow Type Annotations

类型参考网址

• flow官网 Type Annotations
• flow-cheat-sheets 第三方类型手册

原始类型

// @flow

 // 字符串
 const a: string = 'foobar'

 // 数字
 const b1: number = 100
 const b2: number = NaN
 const b3: number = Infinity // 无穷大

 // 布尔
 const c1: boolean = true
 const c2: boolean = false

 // null
 const d: null = null

 // undefined
 const e: void = undefined

 // symbol
 const f: symbol = Symbol()

数组类型

// @flow
// 写法一：Array后面要添加泛型参数，number指定所有由数字组成的数组，若是有其余类型就会报错
 const arr1: Array<number> = [1, 2, 3]
 const arr2: Array<mixed> = [1, true, "three",{a:'1',b:2}]
// 写法二：
 const arr3: number[] = [1, 2, 3]

除了这种数组写法，还有一种特殊的固定长度的数组，咱们称为 —— 元组

元组 —— Tuple Types

• 固定长度数组，若是改变长度会报错
• 下标对应的元素必须是规定类型，设置新值得时候也必须匹配
• 元组不匹配Array类型，由于数组类型长度不肯定
• 不能再元组上使用变异数组的方法，例如：copyWithin、fill、pop、push、reverse、shift、sort、splice、unshift

// @flow
// 元组 —— 固定长度的数组
 // 下面的数组规定了两个元素，若是改变长度就会报错，并且下标对应的元素必须是规定的类型
 const arr4: [string, number] = ['foo', 100]
 arr4[2] = 1 // Cannot assign `1` to `arr3[2]` because  tuple type [1] only has 2 elements, so index 2 is out of bounds.
 const item0: string = arr4[0] // Works！
 const item1: number = arr4[0] // Cannot assign `arr3[0]` to `item1` because  string [1] is incompatible with  number [2]

对象类型

通用写法

肯定一个对象中键值有哪些，而且每一个是什么类型

// @flow
 const obj1: { foo: string, bar: number} = { foo: 'string', bar: 100}
 
// 若是访问了obj1中没有的属性，原来会返回undefined，如今直接当作类型报错
 obj1.baz // Cannot get `obj1.baz` because property `baz` (did you mean `bar`?) is missing in  object type [1]

添加可选属性

可选属性能够是undefined或者省略，可是不能是null

// foo若是无关紧要，那么在foo后面加一个问号
 // 可选属性能够是undefined或者省略，可是不能是null
 const obj2: { foo?: string, bar: number} = { bar: 100}
 obj2.foo = undefined // Works!
 obj2.foo = null // Cannot assign `null` to `obj2.foo` because  null [1] is incompatible with  string [2]

Map类

键的类型用方括号

// 初始化为空，能够本身添加键值对，规定键是string类型，值也是string类型
 const obj3: { [string] : string } = {}

 obj3.key1 = 'value1'
 obj3.key2 = 100 // annot assign `100` to `obj3.key2` because  number [1] is incompatible with  string [2]

混合使用

Map类和普通能够混合使用

// @flow
var obj: {
  size: number,
  [id: number]: string
} = {
  size: 0
};

function add(id: number, name: string) {
  obj[id] = name;
  obj.size++;
}

函数类型

通常是指参数类型和返回值类型进行类型注解

函数参数

// @flow

// 参数输入肯定类型
 function square (n: number) {
   return n * n
 }

可选函数参数

function func1 (num?: number) {
    const n = num ? num : 1
    console.log(n)
 }

 func1()  // 1  能够接受undefined，不能接受null
 func1(2) // 2
 func1(null) // Error!

Rest参数

// @flow
function method(...args: Array<number>) {
  // ...
}

method();        // Works.
method(1);       // Works.
method(1, 2);    // Works.
method(1, 2, 3); // Works.

函数返回

// 返回值肯定类型
 // 有返回值
 function foo (): number {
   return 100
 }
 // 无返回值
 function foo1 (): void {
   
 }

// 回调函数参数和返回值类型 
 function func (callback: (string, number) => void) {
   callback('string', 100)
 }

 func(function (str, n) {
   // str => string
   // n => number
   // 无返回值
 })

特殊类型

字面量类型

与传统类型不一样，这种字面量类型必须限制变量必须是某个值，通常不会单独使用，会配合 联合类型 去组合几个特性的值

// @flow
// 下面定义了n字面量，值只能是存放foo字符串，不能换成别的字符串和别的类型
const n: 'foo' = 'foo'
// 只能是下面三个字符串类型中的一种（下面的就是联合类型，也成或类型）
const type : 'success' | 'warning' | 'danger' = 'success'
// b变量既能够是string也能够是number，能够是字符串也能够是数字
const b: string | number = 'string' // 100 


// 也能够本身定义一个类型，StringOrNumber是一个类型的别名
type StringOrNumber = string | number
const test: StringOrNumber = 'string' // 100

maybe类型

有可能，在基本类型的基础上扩展了null和undefined的类型

// @flow
// 添加？能够使用null和undefined
const gender: ?number = null
const gender1: ?number = undefined
const gender2: ?number = 100

// 相等于下面的number或null或undefined
const gender: number | null | void = undefined

Mixed 与 Any

Mixed

Mixed能够接收任意类型的值，是全部类型的联合类型string | number | boolean | ...

// 参数是mixed类型
function passMixed (value: mixed) {
  console.log(value)
}

passMixed('string') // string
passMixed(100) // 100

Any

和Mixed同样，能够接收任意类型的值

function passAny (value: any) {
    console.log(value)
}

passAny('string') // string

passAny(100) // 100

二者的区别

• Mixed是一个强类型，若是有使用隐患的话就会报错，只能用typeof进行类型判断
• Any是一个弱类型，若是有使用隐患，语法上不会报错。
• Mixed是安全的（推荐使用），Any是不安全的，存在的意义是为了兼容老代码

// Mixed
// 若是没有明确这个变量是字符串仍是数字，那么不能直接进行使用的，会报错
function passMixed (value: mixed) {
  console.log(value)
  value = value ** 2 // Cannot perform arithmetic operation because  mixed [1] is not a number.
}

// 若是想要 解决上面的问题，须要使用typeof进行类型判断
function passMixed (value: mixed) {
  if (typeof value === 'string') {
    value.substr(1)
  }
  if (typeof value === 'number') {
    value ** 2
  }
}

// Any
// 下面语法上是不会报错的, 运行阶段不肯定
function passAny ( value: any) {
  value = value ** 2
}

Flow运行环境API

JavaScript须要运行在某个环境中，例如：浏览器环境或者node环境。
他们有自己本身的API，如浏览器中的DOM和BOM，node中的path等，咱们在flow中也会使用到这些对象。

那么这些有特殊的类型限制，例如：

document.getElementById() //里面参数传字符串，数字会报错
// 这是浏览器环境内置的API的一些限制
document.getElementById('app') //返回对应的类型是HTMLElement
// 若是没有找到对应元素，也返回null类型，那么接收的时候能够这么写
const element: HTMLElement | null = document.getElementById('app')

右键跳到定义能够看到，原生里面有定义

官网仓库给出了一些类型声明，开发的时候能够参考使用

• core-JS标准库的成员:object,array,math,JSON
• dom
• bom
• cssom
• node