41

TypeScript基础入门 - 枚举 - 运行时的枚举和外部枚举

 6 years ago
source link: https://www.gowhich.com/blog/912?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.3.8

为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

npm install -D ts-node

后面自己在练习的时候可以这样使用

npx ts-node 脚本路径

枚举

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。

运行时的枚举

枚举是在运行时真正存在的对象。 例如下面的枚举:

enum E {
    X, Y, Z
}

实际上可以传递给函数

enum E {
    X,Y,Z
}
function f(obj: { X: number }) {
    return obj.X
}

console.log(f(E));

反向映射

除了创建一个以属性名做为对象成员的对象之外,数字枚举成员还具有了 反向映射,从枚举值到枚举名字。 例如,在下面的例子中:

enum Enum {
    A,
}

let a = Enum.A;
let nameOfA = Enum[a];
console.log(nameOfA);

TypeScript可能会将这段代码编译为下面的JavaScript:

var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a];
console.log(nameOfA);

生成的代码中,枚举类型被编译成一个对象,它包含了正向映射( name -> value)和反向映射( value -> name)。 引用枚举成员总会生成为对属性访问并且永远也不会内联代码。

要注意的是 不会为字符串枚举成员生成反向映射。

const枚举

大多数情况下,枚举是十分有效的方案。 然而在某些情况下需求很严格。 为了避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问,我们可以使用 const枚举。 常量枚举通过在枚举上使用 const修饰符来定义。

const enum Enum {
    A = 1,
    B = A * 2,
}

常量枚举只能使用常量枚举表达式,并且不同于常规的枚举,它们在编译阶段会被删除。 常量枚举成员在使用的地方会被内联进来。 之所以可以这么做是因为,常量枚举不允许包含计算成员。

const enum Directions {
    Up,
    Down,
    Left,
    Right,
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

生成后的代码为:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

外部枚举

外部枚举用来描述已经存在的枚举类型的形状。

declare enum Enum {
    A = 1,
    B,
    C = 2
}

外部枚举和非外部枚举之间有一个重要的区别,在正常的枚举里,没有初始化方法的成员被当成常数成员。 对于非常数的外部枚举而言,没有初始化方法时被当做需要经过计算的。

本实例结束实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.3.9

Recommend

  • 55
    • www.gowhich.com 6 years ago
    • Cache

    TypeScript基础入门 - 基础类型

    项目实践仓库 https://github.com/durban89/typescript_demo.git tag: 1.0.2 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 npm install -D ts-node...

  • 72

    项目实践仓库 https://github.com/durban89/typescript_demo.git tag: 1.3.7 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 npm install -D ts-node...

  • 71

    本文首发于 github 博客 如文章对你有帮助,你的 star 是对我最大的支持 背景 大家出来写 Bug 代码的,难免会出 Bug。 文章背景就发生在一个 Bug 身上, 有一天,测试慌张中带着点兴奋冲过来: 测试:"xxx系统前端线上出 Bug 了,点

  • 34

  • 31

    经过了为期 2 年的开发,Deno 终于在 2020 年的 5 月份完成了 1.0 版本 。其 官方网站 宣称,Deno 为 JavaScript 和 TypeScript 提供了一个安全的运行时环境。听...

  • 27
    • hijiangtao.github.io 4 years ago
    • Cache

    TypeScript 枚举类型用法示例

    使用枚举类型可以允许我们定义一些带名字的常量,也可以清晰地表达意图或创建一组有区别的用例。在 TypeScript 中,支持数字的和基于字符串的枚举。 因为对同学的错误指导,于是仔细把 TypeScript Handbook Enum 一节过了一遍,罗...

  • 0
    • segmentfault.com 3 years ago
    • Cache

    使用TypeScript校验运行时数据

    对于前端程序猿,常见的开发流程是:前后端约定接口后端给出接口文档根据接口编写 TypeScript 类型定义开发完成进行联调虽然一切顺利,但是上线后还是翻车了,js 报错:cannot read the property 'x...

  • 4
    • segmentfault.com 2 years ago
    • Cache

    TypeScript 枚举指南

    枚举是受 TypeScript 支持的数据类型。枚举允许您定义一组命名常量。使用它们可以更轻松地记录意图或创建一组不同的案例。枚举大多数用于面向对象的编程语言(如 Java 和 C#)中,现在也可以 TypeScript 中使用。它们是 TypeScript 的少数功能之一,它不是 Java...

  • 9
    • segmentfault.com 2 years ago
    • Cache

    聊聊TypeScript中枚举对象(Enum)

    聊聊TypeScript中枚举对象(Enum)什么是枚举,顾名思义我们看到枚举这个词,脑子里就已经想到这是一个键值对的形式,就可以看做是我们JavaScript中的json对象一...

  • 6

    TypeScript 中根据枚举类型的值获取对应数据 2020-08-26 607点热度...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK