Flow入门教程

Flow：JS的类型检查器

安装

• yarn init --yes 初始化package.json
• yarn add flow-bin --dev 安装flow

使用

以注释语句 @flow 标记

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

• yarn flow init 初始化flow的配置文件
• yarn flow 使用flow对代码进行类型检查
• yarn flow stop 停止Flow Language Support服务

类型注解

Flow官网类型文档：https://flow.org/en/docs/types
第三方文档：https://www.saltycrane.com/cheat-sheets/flow-type/latest

• 变量

//原始类型
const a:string = 'abc'
const b:number = Infinity //NaN 100
const c:boolean = true //false
const d:null = null
const e:viod = undefined
const f:symbol = Symbol()

• 数组类型

//数组元素为number类型
const arr1:Array<number> = [1, 2, 3]
const arr2:number[] = [1, 2, 3]
//固定长度的数组--元组
const arr3:[string, number] = ['foo', 100]

• 对象类型

const obj1:{foo:string, bar:number} = {
    foo: 'string', 
    bar: 100
}
//可选成员
const obj2:{foo?:string, bar:number} = {
    bar: 100
}
//限制键的类型
const obj3:{[string]:string} = {}
obj3.key1 = 'value1'
obj3.key2 = 'value2'

• 函数类型

//函数参数
function sum (a:number, b:number){
    return a+b
}
//函数返回值
function foo():number {
    return 100
}
function faa():viod {
    //无返回值 
}
//回调函数作为参数
function fbb(callback:(string, number) => viod){
    callback('abc', 100)
}

fbb(function(str, num){
    
})

• 特殊类型

//字面量类型
const a:'foo' = 'foo'  //a变量中只能存放字符串'foo'

//联合类型
const b:'success'|'warning'|'danger' = 'success'
const c:string|number = 'string'  //100

//使用type关键词声明一个别名
type StringOrNumber = string | number
const d:StringOrNumber = 'string'  //100

//Maybe类型 相当于:基础类型 ｜ null ｜ undefined
const foo:?numbet = null  //100 undefined

//任意类型 mixed 和 any
function passMixed (value:mixed){
    if(typeof(value) === 'string'){
        value.substr(1)
    }
    if(typeof(value) === 'number'){
        value * value
    }
}
function passAny (value:any){
    value.substr(1)
    value * value
    //不会报错
}
//调用时可以传入任意类型的参数value 都不会报错
passMixed('string')
passMixed(100)
passAny('aaa')
passAny(111)

mixed 和 any 的区别：

• any是弱类型，在不确定它的类型时，可以当作任意类型来操作
• mixed是强类型，必须在明确它的类型（通过typeof）后才能使用

flow开发工具插件

• Flow Language Support --VSCode
• 其他编辑器：https://flow.org/en/docs/editors

移除类型注解

1. flow-remove-types

• 安装
  yarn add flow-remove-types --dev
• 使用
  yarn flow-remove-types <源文件目录> -d <输出目录>

2. babel

• 安装
  yarn add @babel/core @babel/cli @babel/preset-flow --dev
• 使用

项目根目录下添加babel配置文件 .babelrc

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

运行命令 yarn babel src -d dist

运行环境API

如浏览器提供的BOM DOM，node提供的各种模块

//document的getElementById方法要求参数必须是一个字符串
//返回值是一个HTMLElement类型，如果找不到该元素则返回null
const element:HTMLElement|null = document.getElementById('app')