TypeScript 初识 - 枚举

2019-08-14 admin

数字类型枚举

常规枚举的值都是数字类型,因此被称为数字类型枚举:

enum Color {
    Red,
    Blue,
    Green
}
console.log(Color.Red);
// 0
console.log(Color[0]);
// Red
console.log(Color[Color.Red]);
// Red, Color.Red = 0

改变与数字枚举关联的数字

默认情况下,第一个枚举值是 0,后续的值会递增。

可以通过赋值的方法修改枚举关联的数字,后续的值会递增,但不会修改之前的值:

enum Color {
    Red, // 0
    Blue = 2, // 2
    Green // 3
}

手动赋值后,出现前面的值被后面的值覆盖了,但是 TypeScript 不会进行报错:

enum Color {
    Red = 1, // 1
    Blue = 0, // 0
    Green // 1
}
console.log(Color['Red'] === 1); // true
console.log(Color['Green'] === 1); // true
console.log(Color[1] === 'Red'); // false
console.log(Color[1] === 'Green'); // true

字符串枚举

枚举的值还可以设置为字符串,当其中一个值赋值为字符串后,后续的值必须要赋值:

enum Color {
    Red, // 0
    Blue = 'Blue', // Blue
    Green = 'Green' // Green
}

常量枚举

常量枚举可以提升些许的性能,在枚举值不会变化的情况下,最好都使用 const 进行声明:

const enum Color {
    Red,
    Blue,
    Green
}
const red = Color.Red;
// 编译成 const red = 0 /* Red */;

常量枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员。

const enum Color {
    Red,
    Blue,
    Green
}
const red = Color.Red;
// 编译成
// var Color;
// (function (Color) {
//     Color[Color["Red"] = 0] = "Red";
//     Color[Color["Blue"] = 1] = "Blue";
//     Color[Color["Green"] = 2] = "Green";
// })(Color || (Color = {}));
// const red = Color.Red;

计算所得项

枚举项有两种类型:常数项(constant member)和计算所得项(computed member)。

前面的例子使用的都是常数项,计算所得项其实就是通过计算才会得到最后的项:

enum Color {
    Red,
    Green,
    Blue = 'blue'.length
}

计算所得项后面的值都需要进行手动赋值,否则会因为无法获得初始值而报错。

当满足以下条件时,枚举成员被当作是常数:

  • 不具有初始化函数并且之前的枚举成员是常数。在这种情况下,当前枚举成员的值为上一个枚举成员的值加 1。但第一个枚举元素是个例外。如果它没有初始化方法,那么它的初始值为 0

  • 枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集,它可以在编译阶段求值。当一个表达式满足下面条件之一时,它就是一个常数枚举表达式:

    • 数字字面量
    • 引用之前定义的常数枚举成员(可以是在不同的枚举类型中定义的)如果这个成员是在同一个枚举类型中定义的,可以使用非限定名来引用 带括号的常数枚举表达式
    • +, -, ~ 一元运算符应用于常数枚举表达式
    • +, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符,常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity,则会在编译阶段报错

所有其它情况的枚举成员被当作是需要计算得出的值。

外部枚举

外部枚举是使用 declare enum 定义的枚举类型:

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
const directions = [
    Directions.Up,
    Directions.Down,
    Directions.Left,
    Directions.Right
];

// 编译结果
const directions = [
    Directions.Up,
    Directions.Down,
    Directions.Left,
    Directions.Right
];

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。

外部枚举和声明语句一样,常出现在声明文件中。同时使用 declareconst 是可以的:

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

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

// 编译结果
let directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

[转载]原文链接:https://segmentfault.com/a/1190000020066114

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72452.html

文章标题:TypeScript 初识 - 枚举

相关文章
Electron-TypeScript-React 快速开始脚手架
简介 快速启动一个Electron + TypeScritp + React的脚手架, 并且提供了React-Router/ React-Redux/ connected-react-router, 使用electron-builder打包...
2018-09-05
React结合TypeScript和Mobx初体验
为什么要使用TypeScript 侦测错误 通过静态类型检测可以尽早检测出程序中隐藏的的逻辑错误,对于JavaScript动态的弱类型语言,虽然灵活性高,但是对于初学者来说,如果不熟悉JavaScript内部的语言机制,很容易造成隐藏的事...
2018-05-24
记 vscode 搭建 Typescript+React+Dva 开发环境
[ 作为2018年前端最应该学的技术 ], Typescript 确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于 Dva+React+Typescript+Tslint 的环境, 由于其他的百度教程都是 17 年或者...
2018-07-09
用typescript写静态页面
typescript有许多的优点,对于已经上手angular开发的朋友想必都会很熟悉。那么,如果想在其其他非angular框架环境下使用typescript需要哪些步骤呢? 以下内容,我们将以一个静态页面为例,简述搭建typescrip...
2018-04-08
TypeScript 一些你可能不知道的工具泛型的使用及其实现
本文将简要介绍一些工具泛型使用及其实现, 这些泛型接口定义大多数是语法糖(简写), 甚至你可以在 typescript 包中的 lib.d.ts 中找到它的定义, 最新版的 typescript (2.9) 已经包含了大部分, 没有包含的我...
2018-07-24
Vuex? 和 TypeScript 的 Webpack4.+ 尝鲜
静态类型系统能帮助你有效防止许多潜在的运行时错误,而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeScript 的官方类型声明,还为 Vue Router 和 Vuex 也提供了...
2018-05-26
使用webpack搭建基于typescript的node开发环境
原文地址:marxjiao.com/2018/04/10/… 正在学习node.js,这里介绍使用webpack来搭建基于typescript的node开发环境。 整个环境的必备功能 一套好的开发环境能让开发者专注于代码,而不必关系其它事情...
2018-04-22
初识Javascript小结
1.HTML 中的脚本必须位于 &lt;script&gt; 与 &lt;/script&gt; 标签之间。 脚本可被放置在 HTML 页面的 &lt;body&gt; 和 &lt;head&gt; 部分中 2.如需从 JavaScript...
2017-03-27
Bootstrap入门教程一Hello Bootstrap初识
一、Bootstrap简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的,它在 jQuery的基础上进行了更为个性化和人性化的完善,形成一套...
2017-03-14
vue 集成 typescript Element UI 之懒人集成法
背景 最近有点时间,就想把我的vue项目版本升级一下,顺便在折腾一下typescript… 踩过的坑 element ui官方已经写了d.ts,但会有一个小坑,但issue都有解决方案… 正文 vue引入ts有好几种方案,一种引入是还是在....
2018-01-16
回到顶部