06.TypeScript 元组类型、枚举类型

1. 元组类型

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。元组（Tuple）是固定数量的不同类型的元素的组合。

1.1 实例

ts 复制代码

// 声明一个元组类型
let x: [string, number];

// 初始化
x = ['hello', 10]; // 正确

// 访问已知索引的元素
console.log(x[0].substring(1)); // 输出: ello
console.log(x[1].toString()); // 输出: 10

1.2 编译后效果

1.3 输出结果

1.4 越界的元素他的类型被限制为联合类型

1.5 元组数量固定

1.6 可以使用 push，但是会报错提示

1.7 总结

元组数量固定；
元组越界元素被限制在元组内元素的联合类型；
可以使用 push 一类的方法，但是不建议使用，直接访问元素的时候，编译依然会报错。

2. 枚举类型

枚举类型是对 JavaScript 标准数据类型的一个补充，用于定义数值集合。

2.1 数字枚举

2.1.1 代码

ts 复制代码

// 不指定值时，从 0 开始递增
enum Direction2 {
  Up,
  Down,
  Left,
  Right
}

console.log(Direction2.Up); // 输出: 0
console.log(Direction2.Down); // 输出: 1
console.log(Direction2.Left); // 输出: 2
console.log(Direction2.Right); // 输出: 3

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

// 使用枚举
console.log(Direction2.Up); // 输出: 1
console.log(Direction2.Down); // 输出: 2
console.log(Direction2.Left); // 输出: 3
console.log(Direction2.Right); // 输出: 4

2.1.2 编译后效果

2.1.3 输出结果

2.2 字符串枚举

2.2.2 代码

ts 复制代码

enum DirectionStr {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

console.log(DirectionStr.Up); // 输出: UP
console.log(DirectionStr.Down); // 输出: DOWN
console.log(DirectionStr.Left); // 输出: LEFT
console.log(DirectionStr.Right); // 输出: RIGHT

// 字符串枚举可以很好地序列化
console.log(DirectionStr.Up === "UP"); // 输出: true

2.2.2 编译后效果

2.2.3 输出结果

2.3 异构枚举

ts 复制代码

// 枚举可以混合字符串和数字成员
enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

console.log(BooleanLikeHeterogeneousEnum.No); // 输出: 0
console.log(BooleanLikeHeterogeneousEnum.Yes); // 输出: YES

2.3.2 编译后效果

2.3.3 输出结果

2.4 接口枚举

2.4.1 代码

ts 复制代码

// 使用接口定义枚举
enum EnumTypes {
  A = 'A',
  B = 'B'
}

interface TypesInterface {
  A: EnumTypes.A
  B: EnumTypes.B
}

// 为避免变量名重复，修改变量名为 newEnumConst
const newEnumConst: TypesInterface = {
  A: EnumTypes.A,
  B: EnumTypes.B
}

console.log('接口枚举', newEnumConst.A) // 'A'
console.log('接口枚举', newEnumConst.B) // 'B'

2.4.2 编译后效果

2.4.3 输出结果

2.5 常量枚举

2.5.1 实现代码

ts 复制代码

// 使用 const enum 定义常量枚举，会在编译阶段被删除，提升性能
// 常量枚举
const enum DirectionConst {
  Up,
  Down,
  Left,
  Right
}

let directions = [DirectionConst.Up, DirectionConst.Down, DirectionConst.Left, DirectionConst.Right]
console.log('常量枚举', directions) // [0, 1, 2, 3]

// 普通枚举
enum DirectionConstCommon {
  Up,
  Down,
  Left,
  Right
}

let directionsCommon = [
  DirectionConstCommon.Up,
  DirectionConstCommon.Down,
  DirectionConstCommon.Left,
  DirectionConstCommon.Right
]
console.log('普通枚举', directionsCommon) // [0, 1, 2, 3]

2.5.2 编译后效果

2.5.3 输出结果

2.5.4 总结

使用 const enum 定义常量枚举，会在编译阶段被删除，提升性能！，使用和普通枚举一样，只是编译后的结果不同。
let 和 var 都是不允许的声明，只能使用 const。
const 声明的枚举会被编译成常量。
普通声明的枚举编译完后是个对象。

2.6 反向映射

2.6.1 代码

ts 复制代码

// 数字枚举成员具有反向映射
enum Enum1 {
  A
}

let a = Enum1.A
let nameOfA = Enum1[a]
console.log('反向映射', nameOfA) // 'A'
console.log('反向映射', a) // 0

2.6.2 数字枚举成员具有反向映射编译效果

2.6.3 输出结果

2.6.4 字符串枚举成员不具有反向映射编译效果

3. 总结

元组类型表示一个已知元素数量和类型的数组，各元素的类型不必相同；
枚举类型用于定义数值集合，包括数字枚举、增长枚举、字符串枚举、异构枚举、接口枚举、常量枚举和反向映射；
数字枚举默认从 0 开始递增，字符串枚举可以很好地序列化；
增长枚举允许按需定义枚举值；
接口枚举提供了一种定义枚举的替代方式；
常量枚举在编译阶段会被删除，有助于提升性能；
数字枚举支持反向映射，可以通过值获取枚举成员的名称；
每种枚举类型都有其适用场景，选择合适的枚举类型可以提高代码的可读性和维护性。