flow 的简单学习

真的只是简单学习，简单地记录

1、安装 以及开始使用 

在当前的目录执行

yarn add flow --dev

接着 在 要检查的文件上 添加关键字

// @flow

// @flow

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

然后执行初始化

yarn flow init

执行校验

yarn flow

要注意的是，这一块需要取消 vscode 对 js 的校验，要不然会有下划线提示 错误

移除 注释

yarn add flow-remove-types --dev

指定 入口 src 和 移除后的代码的目录 dist

yarn flow-remove-types src -d dist

这样就能够在 dist 目录里面找到 对应的代码了

或者使用babel

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

然后在 .babelrc 中配置

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

yarn babel src -d dist

2、基本使用

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

const un: void = undefined
const sym: symbol = Symbol()

const arr: Array<number | string> = []

函数 作为参数的时候

function usecallback(callback: (number, number) => number) {
}

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

字面量 类型

// 只能是 自己写的这几个 值 才能赋值给 tradeType
type trade = '申购' | '认购' | '赎回'

let tradeType: trade = '赎回'

内置类型

const ele: HTMLElement = document.getElementById('app')