TS中的enum变量和普通object区别

这两种数据经常混用，但是也有一定区别

一、定义

• enum变量通常用使用常量
• object则没有限制值的类型

// 案例
enum Direction {Up,Down,Left,Right
}
const direction = {Up: 'UP',Down: 'DOWN',Left: {},Right: []
};

二、编译后的输出

• enum变量编译后时向映射，会默认添加数字索引，其次是自定义枚举的索引
• enum变量读取属性的时候，可以使用两种索引
• 普通object，不变；典型key：value结构

var Direction;
(function (Direction) {Direction[Direction["Up"] = 0] = "Up";Direction[Direction["Down"] = 1] = "Down";Direction[Direction["Left"] = 2] = "Left";Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
// 等同于
{"0": "Up","1": "Down","2": "Left","3": "Right","Up": 0,"Down": 1,"Left": 2,"Right": 3
}
console.log(Direction[0]); // "Up"
console.log(Direction.Up); // 0
// 普通object，不变
const direction = {Up: 'UP',Down: 'DOWN',Left: {},Right: []
};

三、类型安全

• enum变量定义的变量，值会被检测，超出enum所有枚举值以外的赋值会报错
• 普通object，没有检验，赋值、读取、删除都不受限制（一般如此，可以通过Object.definePropertype配置，或使用Proxy 对象增加限制）

let dir: Direction = Direction.Up; // 正确
dir = 5; // 错误：不能将类型 '5' 分配给类型 'Direction'

四、使用场景

• enum变量常使用于固定场合，其中的枚举值不会动态改变（可以理解为前端可以写死的数据）
• 普通object可以更加方便的扩展和存储数据