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')