目录

  • 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，下面也会报错// 所以如果没有返回值，须要将返回类型标记为voidfunction 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类和一般能够混合应用

// @flowvar 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参数
// @flowfunction 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 | numberconst test: StringOrNumber = 'string' // 100
maybe类型

有可能，在根本类型的根底上扩大了null和undefined的类型

// @flow// 增加？能够应用null和undefinedconst gender: ?number = nullconst gender1: ?number = undefinedconst gender2: ?number = 100// 相等于上面的number或null或undefinedconst gender: number | null | void = undefined

Mixed 与 Any

Mixed

Mixed能够接管任意类型的值，是所有类型的联结类型string | number | boolean | ...

// 参数是mixed类型function passMixed (value: mixed) {  console.log(value)}passMixed('string') // stringpassMixed(100) // 100
Any

和Mixed一样，能够接管任意类型的值

function passAny (value: any) {    console.log(value)}passAny('string') // stringpassAny(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