本文已参与「新人创作礼」活动,一起开启掘金创作之路。
3.13枚举
枚举的功能类似于字面量+联合类型组合的功能,也可以表示一组明确的可选值。
枚举:定义一组命名常量。它描述一个值。该值可以是这些命名常量中的一个。
enum Direction {up,Down,Left,Right}
function changeDirection(direction:Direction){
console.log(direction)
}
解释:
- 使用enum关键字定义枚举。
- 约定枚举名称、枚举中的值以大写字母开头。
- 枚举中的多个值之间通过,(逗号)分隔。
- 定义好枚举后,直接使用枚举名称作为类型注解。
注意:参数direction的类型为枚举Direction,那么,实参的值就应该是枚举Direction成员的任意一个。
访问枚举成员:
enum Direction {Up,Down,Left,Right}
function changeDirection(direction:Direction){
console.log(direction)
}
changeDirection(Direction.Up)
解释:类似于JS中的对象,直接通过点(.)语法访问枚举成员。
问题:我们把枚举成员作为了函数的实参,他的值是什么呢?
changeDirection(Direction.Up);
// 鼠标移动上去显示(enum atemember)Direction.Up = 0
解释:通过将鼠标移入Direction.Up,可以看到枚举成员Up的值为0。
注意:枚举成员是有值的,默认为:从0开始自增的数值。
我们把,枚举成员的值为数字的枚举,称为:数字枚举。
当然,也可以给枚举中的成员初始化值。
// Down -> 11, Left -> 12 ,Right -> 13
enum Direction { Up =10, Down, Left, Right }
enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }
3.13.1 字符串枚举
字符串枚举:枚举成员的值是字符串。
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值。
3.13.2 枚举特性和实现原理
枚举是TS为数不多的非JavaScript类型级扩展(不仅仅是类型)的特性之一。
因为:其他类型仅仅被当做类型,而枚举不仅仅作用类型,还提供值(枚举成员都是有值的)。
也就是说,其他的类型会在编译为JS代码时自动移除。但是,枚举类型会被编译为JS代码!
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
//===>编译后
var Direction;
(function(Direction){
Direction["Up"] = "UP":
Direction["Down"] = "DOWN":
Direction["Left"] = "LEFT":
Direction["Right"] = "RIGHT":
})(Direction || (Direction = {}))
说明:枚举与前面讲到的字面量类型+联合类型组合的功能类似,都用来表示一组明确的可选值列表。
一般情况下 ,推荐使用字面量类型+联合类型组合的方式,因为相比枚举,这种方式更加直观、简洁、高效。
3.14 any类型
原则:不推荐使用any ! 这回让TypeScript变为"AnyScript"(失去TS类型保护的优势)。
因为当值得类型为any时,可以对该值进行任意操作,并且不会有代码提示。
let obj:any ={x:0}
obj.bar=100
obj()
const n:number = obj
解释:以上操作都不会有任何类型错误提示,即使可能存在错误!
尽可能的避免使用any类型,除非临时使用any来"避免"书写很长、很复杂的类型!
其他隐式具有any类型的情况:
- 声明变量不提供类型也不提供默认值
- 函数参数不添加类型
注意:因为不推荐使用any,所以,这两种情况下都应该提供类型!
3.15typeof
中所周知,JS中提供了typeof操作父,用来在JS中获取数据的类型。
console.log(typeof "hello world")
实际上,ts也提供了typeof操作符:可以再类型上下文中引用变量或属性的类型(类型查询)。
使用场景:根据已有变量的值,获取该值得类型,来简化类型书写。
let p={x:1,y:2}
function formatPoint(point:{x:number;y:number}){}
formatPoint(p)
function formatPoint(point:type p){}
解释:
使用typeof操作符来获取变量p的类型,结果与第一种(对象字面量形式的类型)相同。
typeof出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文(区别于JS代码)。
注意:typeof只能用来查询变量或属性的类型,无法查询其他形式的类型(比如函数调用的类型)。