赶个晚集！深入浅出 flow

一. 强类型和弱类型

强类型

强类型语言中不允许任意的隐式类型转换

弱类型

弱类型语言中允许任意的隐式类型转换

二. 静态类型与动态类型

静态类型

一个变量声明时他的类型就是明确的，声明过后，他的类型就不允许再次被修改

动态类型

运行阶段才能够明确的变量类型，而且变量的类型随时可以改变

三. flow

安装flow

js 复制代码

// 初始化项目包

yarn init

// 安装flow

yarn add flow-add --dev

基本使用

运行

js 复制代码

yarn flow

提示要求使用flow init来初始化flow，生成配置文件

js 复制代码

yarn flow init

生成.flowconfig文件

再次运行yarn flow，提示错误

使用flow需要加入注释：// @flow

js 复制代码

// @flow



function sum(x: number, y: number){
    return x + y
}



sum(3, 4)

sum('2', '4')

flow编译移除注解

使用flow-remove-types

安装

js 复制代码

yarn add flow-remove-types

运行

js 复制代码

// 编译到dist文件中，dist文件中为删除后的代码

yarn flow-remove-types . -d dist

// 或

yarn flow-remove-types src -d dist

使用babel

js 复制代码

yarn add @babel/core @babel/cli @babel/preset-flow --dev

新建.babelrc

js 复制代码

{

    "presets": ["@babel/preset-flow"]

}

运行：

js 复制代码

// 将src中的文件代码编译到dist文件中

yarn babel src -d dist

开发工具插件

会直接在文件中显示代码波浪线，更直观的去处理异常。

类型推断

会根据传入与输出的值，自动的推断参数接受内容的异常。

类型注解

js 复制代码

// @flow

// 类型注解

// 为函数参数添加注解

function square(n: number){
    return n * n
}

// 为变量添加注解

let num: number = 100

// 对于没有返回值的函数，应当标记为：function foo(): void {}

function foo(): number {
    return 100
}

flow原始类型

js 复制代码

const a: string = 'burvs'
const b: number = Infinity // NaN 100
const c: boolean = false //true
const d: null = null

// undefined使用void表示
const e: void = undefined

const f: symbol = Symbol()

数组类型

js 复制代码

// 表示全部是数组组成的数组

const arr1: Array<number> = [1, 2, 3]

// 或

const arr2: number[] = [1, 2, 3]


// 指定具体值的类型

// 元组
const foo: [string, number] = ['foo', 100]

对象类型

js 复制代码

// 指定对象中值的具体类型

const obj1: { foo: string, bar: number } = { foo: 'burvs', bar: 100 }


// ？为可选值

const obj2: { foo?: string, bar: number } = { bar: 100 }


// 另一种方式

// [键对应的类型]：值对应的类型

const obj3: { [string]: string } = {}



obj3.key1 = 'value1'

obj3.key2 = 'value2'

#### 函数类型

js 复制代码

// 指定回调函数的参数以及返回值

// void表示无返回值
function foo(callback: (string, number) => void){
    callback('string', 100)
}


// 调用

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

})

#### flow特殊类型

js 复制代码

// 限制变量必须是某一个值

// 限制变量必须是字符串foo

const a: 'foo' = 'foo'

// 限制变量的值必须是以下三种之一
// 或类型
const type: 'success' | 'warning' | 'danger' = 'success'

// 限制b为string或者number类型
const b: string | number = 'burvs'

// 类型别名

type StringOrNumber = string | number
const c: StringOrNumber = 100

// maybe的类型（有可能）

// 除了接受number类型以外，还可以接受null或undefined
const gender: ?number = null

// 相当于
const gender: number | null | void = undefined

#### Mixed Any

js 复制代码

// mixed

function passMixed(value: mixed){}

// 可以接受任意类型

// string ｜ number ｜boolean...
passMixed('string')
passMixed(100)

js 复制代码

// any

function passAny(value: any){}
// 可以接受任意类型
// string ｜ number ｜boolean...
passAny('string')

passAny(100)

区别：

js 复制代码

// mixed为强类型，any为弱类型

function passMixed(value: mixed){
    // mixed需要进行类型判断
    if(typeof value === 'string'){
        value.substr(1)
    }

    if(typeof value === 'number'){
        value*value
    }
}


function passAny(value: any){
    // any在未明确参数类型的情况下仍然可以进行数据处理
    value.substr(1)
    value*value
}

推荐使用mixed，any更多为旧代码过度使用。