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
-
目录【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/