在 TypeScript 中，有几种方法可以枚举类型的可能值。让我们考虑一个情况，我们的网站必须支持不同的主题，包括 default、light 和 dark。
它们可以通过以下方法之一定义：
- 使用文字字符串类型的并集
type Theme = 'DEFAULT' | 'LIGHT' | 'DARK'
- 使用枚举
enum Theme {
DEFAULT,
LIGHT,
DARK
}
区别
TypeScript 不会为文字字符串类型的并集生成代码。因此，生成的代码将具有较小的大小。
以下是 TypeScript 编译 Theme 枚举时生成的代码：
var Theme
(function (Theme) {
Theme[(Theme['DEFAULT'] = 0)] = 'DEFAULT'
Theme[(Theme['LIGHT'] = 1)] = 'LIGHT'
Theme[(Theme['DARK'] = 2)] = 'DARK'
})(Theme || (Theme = {}))
在使用联合类型的情况下，创建新变量时仍必须键入完整字符串，例如：
type Theme = 'DEFAULT' | 'LIGHT' | 'DARK'
const theme: Theme = 'DEFAULT'
像 VS Code 这样的流行编辑器可以帮助我们快速地从可能的值列表中选择值，但是如果我们想将值重构为其他值，我们必须在所有位置手动更改该值。
另一方面，当您重构代码或开发库时，使用 enum 会带来一些显著的好处。让我们来看一个简单的用例，您的库提供以下功能来将网站切换到给定的主题：
const switchTheme = (theme: Theme) => {
// ...
}
export { Theme, switchTheme }
用户现在可以将特定主题传递给 switchTheme 函数，而无需考虑其背后的真正值：
import { Theme, switchTheme } from 'your-lib'
switchTheme(Theme.DARK)
与 switchTheme('DARK') 相比，上面的调用是多么方便和安全。
很高兴知道
自 TypeScript 3.4 起，我们可以使用 const 断言。
const Theme = {
DEFAULT: 'Default',
LIGHT: 'Light',
DARK: 'Dark'
} as const
type Theme = typeof Theme[keyof typeof Theme]
let darkTheme: Theme = Theme.DARK
let lightTheme: Theme = 'Light'
const invalidTheme: Theme = 'Blue' // type error
建议
如果未设置枚举的值，则默认情况下，这些值将设置为递增数。
因此，Theme.DEFAULT、Theme.LIGHT 和 Theme.DARK 的值分别为 0、1 和 2。调试更加困难：
console.log(Theme.DARK) // 2
即使我们为枚举值设置了数字，我们仍然可以为类型为枚举的变量设置无效值：
enum Theme {
DEFAULT = 0,
LIGHT = 1,
DARK = 2
}
// TypeScript 不会抛出错误
const theme: Theme.DEFAULT = 3
由于这些原因，建议对枚举值使用字符串文字。Theme 枚举应如下所示：
enum Theme {
DEFAULT = 'Default',
LIGHT = 'Light',
DARK = 'Dark'
}
console.log(Theme.DARK) // 'Dark'
// 不能将类型 Default 分配给类型 Theme.DEFAULT
let theme: Theme.DEFAULT = 'Default' // type error
更多资料
- TypeScript 基础 — 枚举
- TypeScript 基础 — 联合类型