TypeScript学习5

76 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

3.13枚举

枚举的功能类似于字面量+联合类型组合的功能,也可以表示一组明确的可选值

枚举:定义一组命名常量。它描述一个值。该值可以是这些命名常量中的一个。

enum Direction {up,Down,Left,Right}
function changeDirection(direction:Direction){
    console.log(direction)
}

解释:

  1. 使用enum关键字定义枚举。
  2. 约定枚举名称、枚举中的值以大写字母开头。
  3. 枚举中的多个值之间通过,(逗号)分隔。
  4. 定义好枚举后,直接使用枚举名称作为类型注解。

注意:参数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类型的情况:

  1. 声明变量不提供类型也不提供默认值
  2. 函数参数不添加类型

注意:因为不推荐使用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只能用来查询变量或属性的类型,无法查询其他形式的类型(比如函数调用的类型)。