因为我们javascript是弱类型语言，所以有些时候编译，或者重构的时候会遇到一些各种各样的问题，所以我们今天就 简单 说一下 Flow类型检测工具！
弱类型的问题
- 运行阶段才能发现问题
-
obj.foo()\ //这样写不会报错，只会在运行的时候报错\ - 可能会改变函数的作用
-
return a+b;\ }\ console.log(sum(100,100)) //200\ console.log(sum(100,'100')) //100100\ \ //这样就改变了函数的作用了 - 对象索引器的错误用法
-
obj[true] = 100\ console.log(obj['true']) //这样照常输出来啦
强类型的优势
- 错误更早暴露
- 代码更智能，编码更准确
- 重构更加牢靠，例如修改某个方法名，强类型会在其他的地方有引用的都会报错，这样方便我们修改重构
- 减少不变要的类型判断
\
Flow 类型检查器
使用方式
- yarn init
- yarn add flow
- yarn flow init
- 在文件加上 里面的头部加上 //@flow
- yarn flow
flow移除注解
- yarn add flow-remove-types --dev //先安装
- yarn flow-remove-types . -d dist //.是当前目录 dist是输出目录
或者使用babel
- yarn add @babel/core @babel/cli @babel/preset-flow
- 然后新建一个 .babelrc文件 里面写上 {"presets":["@babel/preset-flow"]}
- yarn babel . -d dist
开发工具插件
Flow Language Support 可以更方便的 在我们编写代码的时候提示
\
flow还可以自动推断类型 最好还是自己添加注解
类型注解
function square(n:number){
return n*n
}
let num:number = 100
function foo():void{
}
Flow 原始类型
const a:string = 'foo'
const b:number = 2333
const c:boolean = false
const d:null = null
const e:void = undefined
const f:symbol = Symbol()
Flow数组类型
const arr1: Array<number> = [1,2,3]
const arr2: number[] = [1,2]
//这种固定参数 以及类型的 称之为元组
const foo:[string,number] = ['foo',33]
Flow对象类型
- 规定键名 以及键值的类型
- ？是可选参数
- 通过[] 还可以规定键的类型
const obj1: { foo:string, bar:number} = {foo:'string',bar:100}
const obj2: {foo?:string,bar:number} = {bar:100}
const obj3:{[string]:string} ={}
函数类型
- 如果传入的是一个函数 可以设置函数的参数类型 以及返回值类型
function foo(callback:(string,number)=>void){
callback('string',100)
}
特殊类型
- 字面量类型
- 一般配合联名声明
const a:'foo'= 'foo'
const type: 'success' | 'warning' | 'error' = 'success'
type StringOrBoolean = string | boolean
const b:StringOrBoolean = 'string'
const gender:?number =undefined
//相当于
const gender: number | null |undefined
Mixed$Any
- 都可以接收任意类型的参数
- any是弱类型 定义的时候不会报错
- mixed是强类型 定义的时候如果不一样 就会报错
//会报错
function foo(value:mixed){
a*a
value.substr(1)
}
//不会报错
function foo(value:any){
a*a
value.substr(1)
}
\
类型小结
这个网址可以 可以了解更详细的
Flow Type Cheat Sheetwww.saltycrane.com/cheat-sheets/flow-type/latest/
最后，如果对你有帮助 记得 点赞！ 收藏哟~
如果喜欢博主的 记得点波关注哦！！！
