Typescript enums 的正确用法

前言

对于现在技术社区的现状的，我分析用户画像 觉得大部分的用户更多的是喜欢短频快的节奏文章，所以故尝试用最短时间挖掘简单的面试题，将背后的知识整理分享给大家，喜欢在后续的面试过程中，可以对你有帮助，如果刚好是自己的知识盲区不妨帮忙点赞支持一下

背景

我们 TS 会经常遇到不知道该如何使用 枚举 enums 场景，接下来我们分析用户的场景然后进行实际应用吧

enums 语法

// 枚举 enums
enum Direction {
    Up,
    Down,
    Left,
    Right,
}

console.log(Direction.Up); // 构建了 Up 索引
console.log(Direction[0]); // 构建了 0 索引 双向构建索引

编译后，我们发现有趣的地方是 双向构建索引的机制，将顺序索引和Key 索引都构建起来

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 = {}));

正确使用enum姿势

第一种情况

当我们定义枚举的时候，直接使用关键词 enum 时候

// 不使用 const 枚举 enums
enum Direction {
    Up = 'UP',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right',
}

const value = 'UP'

if (value === Direction.Up) {
    // do something
}

编译后

// 枚举 enums
var Direction;
(function (Direction) {
    Direction["Up"] = "UP";
    Direction["Down"] = "Down";
    Direction["Left"] = "Left";
    Direction["Right"] = "Right";
})(Direction || (Direction = {}));
var value = 'UP';
if (value === Direction.Up) {
    // do something
}

第二种情况

当我们使用 const 关键词命名枚举的情况下，我们会惊喜地发现变化

// 使用 const 定义枚举 enums
const enum Direction {
    Up = 'UP',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right',
}

const value = 'UP'

if (value === Direction.Up) {
    // do something
}

编译后

var value = 'UP';
if (value === "UP" /* Up */) {
    // do something
}

所以合理地使用 enum 枚举对提高应用的性能来说是帮助很大的

小结

这篇文章到这里就结束了，水平有限难免有纰漏，欢迎纠错。最后希望帮忙点点赞，这对我创作是无比的肯定和动力。希望可以帮到你