關於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 }