Flow 简单的介绍

强类型与弱类型

强类型语言不存在隐式类型的转换，而弱类型可以

静态类型语言与动态类型语言

静态类型语言：变量在声明时类型是明确的，后续是不可更改的
动态类型语言：变量的类型随时可以改变，其类型在运行阶段才会被确定。

Flow

js的静态类型检查器，由facebook提供

1.安装

在项目中安装：yarn add flow-bin
初始化配置文件：yarn flow init
执行检查文件命令：yarn flow

注意：在需要的js文件头部添加 // @flow

2.编译后移除注解

方式一：
通过工具进行自动移除注解：yarn add flow-remove-types
执行命令： yarn flow-remove-types . -d dist

方式二：
通过babel来实现自动移除注解
安装babel相关库：yarn add @babel/core @babel/cli @babel/preset-flow -D
根目录添加.babelrc配置文件：

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

执行去除注解命令：yarn babel src -d dist

3.Flow编辑器的开发工具插件

vscode: Flow Language Support
其他编辑器插件请参考官网：https://flow.org/en/docs/editors/

4.Flow原始类型

string
number(包括NAN)
boolean
undefined
null
Symbol
void

5.Flow数组类型

Array<元素类型>
元素类型[]
[元素类型1，元素类型2，元素类型3…]

6.Flow对象类型

{
    '属性名1':'属性名1类型',
    '属性名2':'属性名2类型',
    '属性名3':'属性名3类型',
    '属性名4':'属性名4类型',
    ...
}

7.Flow函数类型

对函数的参数以及返回值进行类型的指定

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

对于存放函数的变量进行类型的指定，使用类似于箭头函数的形式进行类型的定义

const fn: (number, number)=>number = sum;

8.Flow特殊类型

字面量类型

const a: 'foo' = 'foo'

联合类型：

const type: 'success' | 'warning' | 'danger' | 'other' = 'danger'

指定变量的类型是 mixed类型或any类型，可以接受任何类型。
mixed类型是强类型
any类型是弱类型