首页 前端 TypeScript 正文

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  枚举对提高应用的性能来说是帮助很大的

小结

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

原文:https://juejin.cn/post/7098542845824335902
打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/4658.html

相关推荐

详解TypeScript中的泛型

详解TypeScript中的泛型

   前言    对于现在技术社区的现状的,我分析用户画像 觉得大部分的用户更多的是喜欢短频快的节奏文章,所以故尝试用最短时...

TypeScript 2022.08.20 0 1086

获取链表中倒数第K个节点

获取链表中倒数第K个节点

   前言    对于现在技术社区的现状的,我分析用户画像 觉得大部分的用户更多的是喜欢短频快的节奏文章,所以故尝试用最短时...

TypeScript 2022.06.01 0 1022

TypeScript 泛型从新手到入门

TypeScript 泛型从新手到入门

   前言    对于现在技术社区的现状的,我分析用户画像 觉得大部分的用户更多的是喜欢短频快的节奏文章,所以故尝试用最短时...

TypeScript 2022.05.31 0 1028

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站