零基础入门Flow

Flow静态类型检查方案即javascript的类型检查器，能够作为解决javascript自身存在的类型系统不足问题的一种方法。

原理：把我们编写的代码和实际生产环境的代码分开，中间加入编译的环节，这样就能使用js的扩展语法，因为类型检测变得可能。

function sum(a: number,b) {
    // a: number
    // b: any
    return a + b
}

Flow只是一个小工具，可以为函数的参数添加注解来做类型判断，如上。

• 安装：yarn add flow-bin –dev

• 使用的前提：关闭vscode的js语法检测功能，否则使用类型注解会报错

• 使用步骤

  • 1.在需要检查的文件开头添加 // @flow

    // @flow
    function sum(a: number, b: number) {
        return a + b
    }
    
    sum(100,100)
    sum('100','100')

  • 2.初始化flow：yarn flow init（会生成一个flow配置文件）

  • 3.执行flow：yarn flow

（1）Flow编译自动移除类型注解

两种方法

• 通过官方提供的flow-remove-types（简单、快速）
• 通过babel去配合preset-flow插件

（2）Flow开发工具插件

在vscode中通过安装Flow Language Support插件，能直观体现代码类型的问题，而不是通过在控制台看

（3）Flow类型推断

根据代码中的使用情况去推断变量的类型，称为类型推断。虽然Flow能帮我们做类型推断，但是为了更好的代码可读性，一般添加类型注解。

（4）Flow类型注解

不仅能用于函数的参数上，还可以用于变量和函数的返回值上

/**
* 类型注解
* 
* @flow
*/

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


let num: number = 100
// num = 'string'  会报错


function foo(): number {
    return 100
    //return 'string'  会报错
}

（5）Flow原始类型

/**
* 原始类型
* 
* @flow
*/

const a: string = 'foobar'

const b: number = Infinity // NaN   // 100

const c: boolean = false //true

const d: null = null

const e: void = undefined

const f: symbol = Symbol()

（6）Flow数组类型

//1.使用泛型来约束
const arr1: Array<number> = [1,2,3]

//2.使用number来约束
const arr1: number[] = [1,2,3]

//3.使用字面量来约束（这里是固定长度的数组，也称元组）
const foo: [string,number] = ['foo',100]

（7）Flow对象类型

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

const obj2 = {foo?:string,bar:number} = {bar:12345} //添加?表示foo这个属性可有可无

const obj3:{[string]:string} = {}  //这样做可以为该对象动态添加属性，如下，但这里动态键值只能是string
obj3.key1 = 'string' 

（8）Flow函数类型

//定义一个参数为回调函数（没有返回值）的函数，所以调用时参数里的回调函数不能有返回值或者返回undefined，这就是函数的类型限制
function foo (callback:(string,number) => void){
	callback('string',123)
}
foo((str,n) =>{
	console.log(str,n)
)

（9）Flow特殊类型

//1.字面量类型，如下，只能够存放自定义的值
 const a:'foo' = 'foo'
 const type:'success'| 'warning'|'danger' = 'success' 
 const b:string|number = 'string' 
 
 type StringOrNumber = string | number  //type关键字 声明一个或类型
 const b:StringOrNumber  = 'string'   

//2.maybe类型（值扩展了null和undefined）
const gender: ?number = undefined //变量前加上？则变为maybe类型，则值可以为null或者undefined或number类型

（10）Flow中的Mixed与Any

mixed和any都可以接收任意类型的值，两者区别在于mixed是强类型（安全，但需要加类型判断），而any则是弱类型（不安全，主要用于兼容以前的代码）

//以下两个函数调用时的参数可以为任意类型，如string | number | boolean | ...
function passMixed(value: mixed) {
    if (typeof value === 'string') {
        value.substr(1)//不加类型判断会报语法错，下同
    }
    if (typeof value === 'number') {
        value * value 
    }
}
passMixed('string')
passMixed(100)

function passAny(value: any) {
    value.substr(1)
    value * value 
}
passAny('string')
passAny(100)

总而言之，Flow的学习主要用于理解vue/react源码时，能够看懂使用Flow的情况。

所有类型的描述文档（官网文档）：https://flow.org/en/docs/types/