关于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 } 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章