TypeScript篇三 ---枚举、any、typeof的简要总结

枚举

在ts中枚举类用enum关键字定义，例子见下：

//^ 定义一个枚举类
enum Direction20 {
  up,
  right,
  down,
  left
}

// 声明一个函数，里面有一个参数，类型为枚举类型
function changeDirection20(direction: Direction20) {
  console.log(direction);
}

// 使用的时候和对象访问属性的方式一致，函数的参数只能是枚举的其中一个
changeDirection20(Direction20.down)

每个枚举项是有自己的值的，如果不设置值的话默认是从0累加

enum Direction {
  up,
  right,
  down,
  left
}

console.log(Direction.up)      // 0
console.log(Direction.right)   // 1
console.log(Direction.down)    // 2
console.log(Direction.left)    // 3

如果给其中一个值设置数字初始值，那么其后的枚举项的值会基于这个值累加，之前的还是从0往上递增

//^ 单独给第一个枚举设置值之后，后面的会基于第一个值往后递增
enum Direction1 {
  up = 10,
  right,
  down,
  left
}

console.log(Direction1.up)      // 10
console.log(Direction1.right)   // 11
console.log(Direction1.down)    // 12
console.log(Direction1.left)    // 13

enum Direction2 {
  up,
  right = 10,
  down,
  left
}

console.log(Direction2.up)      // 0
console.log(Direction2.right)   // 10
console.log(Direction2.down)    // 11
console.log(Direction2.left)    // 12

每个枚举项都可以设置自己的值

//^ 每个枚举项都可以设置自己的值
enum Direction3 {
  up = 2,
  right = 4,
  down = 6,
  left = 8
}

console.log(Direction3.up)      // 2
console.log(Direction3.right)   // 4
console.log(Direction3.down)    // 6
console.log(Direction3.left)    // 8

枚举类型的值还可以设置字符串类型

enum Direction5 { 
  up = 'up',
  right = 'right',
  down = 'down',
  left = 'left'
}

// 编译之后的效果
(function (Direction5) {
    Direction5["up"] = "up";
    Direction5["right"] = "right";
    Direction5["down"] = "down";
    Direction5["left"] = "left";
})(Direction5 || (Direction5 = {}));

当设置了一个枚举项的值是字符串时，从设置属性之后的属性都必须赋予初始值，之前的倒没有影响

enum Direction6 { 
  up,
  right,
  down,
  left= 'up',
}

// 编译之后的效果
var Direction6;
(function (Direction6) {
    Direction6[Direction6["up"] = 0] = "up";
    Direction6[Direction6["right"] = 1] = "right";
    Direction6[Direction6["down"] = 2] = "down";
    Direction6["left"] = "up";
})(Direction6 || (Direction6 = {}));

如果设置的字符串是汉字，则会被编译为 utf - 8 格式

enum Direction4 { 
  up = '上',
  right = '下',
  down = '左',
  left = '右'
}

// 编译之后的结果
var Direction4;
(function (Direction4) {
    Direction4["up"] = "\u4E0A";
    Direction4["right"] = "\u4E0B";
    Direction4["down"] = "\u5DE6";
    Direction4["left"] = "\u53F3";
})(Direction4 || (Direction4 = {}));

说明

//* 枚举类型会被编译为JS代码，枚举和字面量类型+联合类型组合的功能类似，都用来标识一组明确的可选值列表
//* 一般推荐使用字面量类型+联合类型组合的方式，相比枚举更加直观、简洁、高效
//* 这种方式更加方便，因为不会先被编译为js代码
// 字面量类型很适合有一组明确值的选项情况
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {}

changeDirection('down') // 指定参数后只能四选一

any类型

出现any类型一般有两种情况

• 声明变量只声明不赋初值，该变量会成为any类型
• 函数的形参值声明不指定类型，也会变为any

不推荐使用any，否则typescript将会变得毫无意义

// 毫无限制，随便弄
let a22
a22 = 1
a22 = '你好'
a22()
a22.name = 11

ts中的typeof

在js中typeof主要是用来获取数据的类型，在ts当中可以在类型上下文中引用变量或属性的类型，见下：

let obj = {
  num1: 1,
  num2: 2,
}

// 当我们再编写函数时，如果函数参数和obj的变量类型一致，则可以直接引用
function testFn(point: typeof obj):void { }

testFn({ num1: 1, num2: 2 })

let num: typeof obj.num1 // num就被指定成了number类型
num = 1

注意，typeof只能获取变量或者对象的属性的类型，其他的不行，例如函数调用返回值的类型