TypeScript之前-Flow

2022-09-06  本文已影响0人  老黑来袭

FLow 可以帮我们找到代码上的一些使用上的问题(类型检查,类似于Swift的申明方式 指定数据的类型)
如何使用:

1、在项目当中安装一个Flow工具,

命令行输入:yarn add flow-bin --dev

2、在需要Flow类型检查的文件当中添加一个:

//@FLow

的注释

3、在代码当中对成员添加类型注释

添加前:

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

添加后

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

如何使用:
在命令行终端中输入:

yarn flow

如果第一次执行输入需要
yarn flow init
yarn flow stop
如何关闭javaScript的类型检查:
cmd + ,
搜索jscascript validate

导致的问题:
添加类型注解之后会造成代码没有办法去运行的,所以需要借助工具在编码之后移除类型注解

yarn flow-remove-types <目录>   -d <输出到哪个目录>
yarn flow-remove-types .   -d  dist // 输出当前目录移除注解到dist 文件夹

###另一种移除类型注解的方式,借助 @bable 插件
安装bable

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

更好的看:
vscode 插件 Flow Language Support

类型举例:

string
let a: String = 'str'
number
let num: number = 10
let num: number = NaN /// 也属于 表述非数据 也是number类型
let num: number = infinity /// 无穷大
bollean
const a: boolean = false true
null
const n: null = null /// 只能是null
undefined 注意
const n: void = undefined
symbol
const s: symbol = symbol()
数组:和Swift 一样泛型
const a: Array<number>
另一种表述方式
const a: number[]
元组概念和Swift相同只不过用[]表述
const a:[string, number]
对象  
const obj: {}
也可以写上必须存在的属性
const obj: {foo: string, bar: number }表示实例此对象时必须要给予这两个属性
const obj: {foo: string, bar: number } = {foo: 'foo', bar: 100 }
可选属性和Swift相同'?'
const obj: {foo?: string, bar: number }
指定键值对类型:
const obj:{[string], string} 表示这个对象所有的键值都必须string类型
函数类型注解
对函数的参数和返回值进行 :类型

函数作为参数限制函数的参数
func aaa(callBack(string, number) => void) {
限制 callBack 函数的参数
}
字面量类型
const a: 'foo' = 'foo'
代表a只能被赋值为 foo
a = 'foo'
联合体使用字面量类型
const a : 'succeed' | 'warning' | 'danger' = 'succeed'
代表 a 只可以被赋值 'succeed' | 'warning' | 'danger' 其中的一个值


也可以:
const a: string | number = ''
代表a 可以是 string 、number 类型

mixed 类型
function passMixed(a: mixed) {
  /// 强类型 使用时需要判断实际类型使用
if (a typeof string) {

}
}
passMixed('string')
passMixed(100)
mixed相当于所有类型的联合类型

any 类型 用法同mixed
不同的是any是弱类型,mixed是强类型
any则不用判断,直到运行时
上一篇下一篇

猜你喜欢

热点阅读