关于typescript 枚举类型转换为javascript 后文件解释

枚举

　　枚举类型是数字原始类型的一个确定子类型。它是一组相关的定义了枚举类型可能值的命名常量。

1 枚举声明

　　枚举声明声明一个枚举类型和枚举对象。

　　EnumDeclaration:
　　　　constopt   enum   BindingIdentifier   {   EnumBodyopt   }

　　枚举声明：

　　　　const(可选） enum 绑定标识符{ 枚举体（可选）}

　　枚举类型声明向容器空间中引入一个命名类型和一个命名值。枚举类型是一个数字原始类型的确定子类型。枚举对象是一个匿名对象的值，它包含了一个属性集合，所有的枚举类型相对于枚举体中枚举类型声明的值。此外，枚举对象类型包含了一个“[x: number]: string”签名的数字索引签名。

　　枚举声明的标识符不能与预定义类型名相冲突。

　　静态枚举声明用“const”修饰符修饰。静态枚举声明成员必须都具有可以在编译时计算的静态值。

 

1	enum Color { Red, Green, Blue }

 

　　声明了一个数字原始类型的子类型“Color”，引入一个相应的变量“Color”；

 

1 2 3 4 5 6

var Color: {     [x: number]: string;     Red: Color;     Green: Color;     Blue: Color; };

　　数字索引签名是自动生成的枚举对象的”反向映射",反向映射使枚举值可以表示为字符串。

1 2	var c = Color.Red; console.log(Color[c]);  // Outputs "Red"

2 枚举成员

　　枚举声明体定义零个或多个成员

　　EnumBody:
　　　　EnumMemberList   ,opt

　　EnumMemberList:
　　　　EnumMember
　　　　EnumMemberList   ,   EnumMember

　　EnumMember:
　　　　PropertyName
　　　　PropertyName   =   EnumValue

　　EnumValue:
　　　　AssignmentExpression

　　枚举体：

　　　　枚举成员列表，（可选）

　　枚举成员列表：

　　　　枚举成员

　　　　枚举成员列表，枚举成员

　　枚举成员：

　　　　属性名

　　　　属性名=枚举值

　　枚举值：

　　　　赋值表达式

　　枚举成员的属性名不能是计算属性名。

　　枚举成员是常量成员或计算成员。常量成员具有已知的常量值，在生成的js代码中直接赋值而不是引用成员。计算成员的值是在运行时计算的，它在编译时是未知的。

　　枚举成员分类如下：

• • 如果成员声明没指定值，那么此成员就是一个常量枚举成员。如果此成员是枚举声明中的第一个成员，那么它被分配了“0”值，否则累加一。
  • 如果成员声明指定了一个常量表达式，那么此成员就是一个常量枚举成员。
  • 否则，此成员就是计算枚举成员。

　　枚举值表达式必须是“any”类型、数字原始类型或枚举类型。

　　如果满足下面任意一个条件，这个表达式就是常量枚举表达式：

• • 一个数字
  • 一个指定在同一常量枚举声明中声明过的成员的标识符或属性
  • 有括号的常量枚举表达式
  • +，-或~一元操作符运用于一个常量枚举表达式
  • +, –, *, /, %, <<, >>, >>>, &, ^或|操作符运用于两个常量枚举表达式

　　例如：

1 2 3 4 5 6 7

enum Test {     A,     B,     C = Math.floor(Math.random() * 1000),     D = 10,     E }

　　”A“、 ”B“、 ”D“和”E“分别是值为0,1,10和11的常量成员。”C"是计算成员。

 

1 2 3 4 5 6 7 8

enum Style {     None = 0,     Bold = 1,     Italic = 2,     Underline = 4,     Emphasis = Bold | Italic,     Hyperlink = Bold | Underline }

　　上例中，所有成员都是常量成员。枚举成员声明可以引用其他枚举成员。因为枚举是数字原始类型的子类型，所以枚举值可以由"or”等数字操作符计算而得。

3 声明合并

 

　　枚举是“开放性”的。具有相同名称的枚举声明相对于同一个根。他们定义同一个枚举类型，用于同一枚举对象。

　　当枚举声明已经合并了，那么他们必须是所有都由“const”修饰或所有都不由“const”修饰。

4  常量枚举声明

　　常量枚举声明由“const”修饰符修饰。它的每个成员都必须是常量值。

　　不同于常规枚举声明，常量枚举声明在生成的js代码中被完全擦除。

1 2 3 4 5 6 7 8

const enum Comparison {     LessThan = -1,     EqualTo = 0,     GreaterThan = 1 } var x = Comparison.EqualTo;  // Ok, 生成的js代码中以“0"代替 var y = Comparison[Comparison.EqualTo];  // Error var z = Comparison;  // Error

　　在生成的js代码中，所有的常量枚举声明都被擦除了。唯一能被引用的是枚举对象的值。

5  生成代码

　　枚举声明生成如下格式的js代码：

　　var <EnumName>;
　　(function (<EnumName>) {
    　　<EnumMemberAssignments>
　　})(<EnumName>||(<EnumName>={}));

　　”EnumName“ 是枚举名称。”EnumMemberAssignments“ 是表达式赋值列表，表达式如下：

　　<EnumName>[<EnumName>["<MemberName>"] = <Value>] = "<MemberName>";

　　”MemberName“是枚举成员名，”Value“是分配的常量值或计算值表达式生成的代码。

　　9.1节中的枚举声明生成js代码如下：

1 2 3 4 5 6

var Color; (function (Color) {     Color[Color["Red"] = 0] = "Red";     Color[Color["Green"] = 1] = "Green";     Color[Color["Blue"] = 2] = "Blue"; })(Color||(Color={}));

6  关于生成js 函数解释

js 中

(function (Color) {

    Color[Color["Red"] = 0] = "Red";

    Color[Color["Green"] = 1] = "Green";

    Color[Color["Blue"] = 2] = "Blue";

})(Color||(Color={})); 等价于：

var Color;
function myFunction(Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
}
myFunction(Color || (Color = {}));

7 对于 Color[Color["Red"] = 0] = "Red"; 相当于

Color["Red"] = 0；

Color[0] = "Red";

通过6 中代码声明 则Color如下：

var Color={ '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 } 

 

来源：CSDN

作者：快乐出发并坚持

链接：https://blog.csdn.net/xingji041/article/details/104773639