TypeScript-枚舉類型

• 枚舉類型是 TS 為 JS 擴展的一種類型，在原生的 JS 中是沒有枚舉類型的，枚舉用於表示固定的幾個取值
• 例如：一年只有四季、人的性別只能是男或者女

定義枚舉

enum Gender {
    Male,
    Female
}

如上代碼的含義為，定義了一個名稱叫做 Gender 的枚舉類型, 這個枚舉類型的取值有兩個, 分別是 Male 和 Female：

enum Gender {
    Male,
    Female
}

let val: Gender;
val = Gender.Female;
console.log(val);

如上代碼的含義為，定義了一個名稱叫做 val 的變量, 這個變量中只能保存 Male 或者 Female 運行結果如下：

錯誤示例，例如給了不是在 Gender 當中定義的值：

enum Gender {
    Male,
    Female
}

let val: Gender;
val = 'nan';
console.log(val);

注意點

TS 中的枚舉底層實現的本質其實就是 數值類型，所以賦值一個數值不會報錯：

enum Gender {
    Male,
    Female
}

let val: Gender;
val = 0;
console.log(val);
console.log(Gender.Male);
console.log(Gender.Female);

TS 中的枚舉類型的取值, 默認是從上至下從 0 開始遞增的：

enum Gender {
    Male,
    Female
}

console.log(Gender.Male);
console.log(Gender.Female);

雖然默認是從 0 開始遞增的, 但是我們也可以手動的指定枚舉的取值的值：

enum Gender {
    Male = 6,
    Female = 9
}

console.log(Gender.Male);
console.log(Gender.Female);

如果手動指定了前面枚舉值的取值, 那么后面枚舉值的取值會根據前面的值來進行遞增：

enum Gender {
    Male = 6,
    Female
}

console.log(Gender.Male);
console.log(Gender.Female);

如果手動指定了后面枚舉值的取值, 那么前面枚舉值的取值不會受到影響：

enum Gender {
    Male,
    Female = 8
}

console.log(Gender.Male);
console.log(Gender.Female);

我們還可以同時修改多個枚舉值的取值，如果同時修改了多個, 那么修改的是什么最后就是什么：

enum Gender {
    Male = 1,
    Female = 8
}

console.log(Gender.Male);
console.log(Gender.Female);

還可以通過枚舉值拿到它對應的數字：

enum Gender {
    Male,
    Female
}

console.log(Gender.Male);
console.log(Gender.Female);

還可以通過它對應的數字拿到它的枚舉值：

enum Gender {
    Male,
    Female
}

console.log(Gender[0]);

探究底層實現原理

進入：https://www.typescriptlang.org/play?#code/KYOwrgtgBA4qAmwBOUDeAoKWoFkCGANsADSbYBiwEhw6AvkA

將我們的枚舉代碼復制進去進行編譯可以得到經過最終處理的 JS 代碼如下：

然后將編譯好的 JS 代碼復制出來進行分析，發現當中有一個逼格很高，而且很巧妙很靈活的一種寫法 Gender[Gender["Male"] = 0] 然后博主親自去瀏覽器的控制台當中進行測試一下該語法的返回值就是所對應的 0：

弄明白了底層語法的其中不明確的內容之后那么編譯之后的 JS 代碼可以等價於如下的代碼, 其實 TS 實現枚舉就是在一個對象當中添加 4 個不同的 key 進行實現的，所以這就是如上我們即可使用數字又可以使用所對應值的原因：

let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Femal"] = 1;
Gender[1] = "Femal";