TypeScript - 枚举类型 Enum Types

·  阅读 1046

在应用开发中经常会涉及到用某几个数值去代表某种状态,比如下例中用数字表示文章的发布状态:0:‘草稿’、1:‘未发布’,2: ‘已经发布’。也就是说这个状态属性的取值,也只有 0、1、2这三个值。如果直接在代码中使用 0、1、2这种字面量去表示状态的话,时间久了就有可能搞不清楚这里所写的这个数字它到底对应的是那个状态,并且时间久了还有可能混进来一些其他的数值。这种情况下使用枚举类型是最合适的了,因为枚举类型有两个特点:

  • 为一组数值分别取上更好理解的名字

  • 一个枚举中只会存在几个固定的值,并不会出现超出范围的可能性

    const post = { title: 'Hello TS', content: 'TS is a typed superset of JS', status: 0 }

在很多传统的编程语言当中,枚举是一个非常常见的数据结构。不过在JS当中并没有这种数据结构,很多时候都是使用一个对象去模拟实现枚举。

const postStatus = {
  Draft: 0,
  Unpublished: 1,
  Published: 2,
}
enum PostStatus {
  Draft = 0,
  Unpublished = 1,
  Published = 2,
}
const post = {
  title: '...',
  content: '...',
  status: PostStatus.Draft
}
复制代码

枚举类型会入侵到运行时的代码,它会影响编译后的结果在 TS 中使用的大多数类型在经过编译后,最终都会被移除掉因为它们的左右只是为了在开发过程中提供类型检查。而枚举不会被删除,它会被编译成一个双向的键值对对象。所谓的双向键值对,就是可以通过键获取值也可以通过值获取键。目的就是为了可以动态的根据枚举值获取枚举的名称,也就是说可以在代码当中通过索引器的这种方式去访问对应的枚举名称。如果说可以确认代码当中不会使用索引器的方式去访问枚举,就建议大家去使用常量枚举。

// 编译后
var PostStatus;
(function(PostStatus){
  PostStatus[PostStatus['Daft'] = 0] = 'Draft';
  PostStatus[PostStatus['Unpublished'] = 1] = 'Unpublished';
  PostStatus[PostStatus['Published'] = 2] = 'Published'
})(PostStatus||(PostStatus = {}))

console.log(PostStatus)
// {
//  0: 'Draft',
//  1: 'Unpublished',
//  2: 'Published',
//  Draft: 0,
//  Unpublished: 1,
//  Published: 2,
// }
复制代码

常量枚举的用法就是在枚举的 enum 关键词前面加上 const。

// 编译前
enum PostStatus {
  Draft = 0,
  Unpublished = 1,
  Published = 2,
}
const post = {
  title: '...',
  content: '...',
  status: PostStatus.Draft
}
// 编译后
var post = {
  ...
  status: 0
}
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改