关于javascript: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