VSCode中TypeScript枚举值的IntelliSense代码补全失效问题

问题原因 #

你定义的CurrentExample是枚举成员的联合类型，而非字符串字面量的联合类型。虽然Example.NameOne的运行时值是'bad_name_one'，但在TypeScript类型系统里，Example.NameOne本身是一个独立的枚举成员类型，和字符串字面量'bad_name_one'属于两个不同的类型概念。VSCode的IntelliSense在识别字符串字面量输入位置时，只会对字符串字面量联合类型触发补全，不会自动关联枚举成员对应的字符串值。

解决方法 #

有两种实用的处理方式：

方法1：自动推导枚举值的字符串字面量联合类型

利用typeof和keyof语法，自动推导枚举所有值对应的字符串字面量联合类型，避免手动重复编写字符串：

export enum Example {
  NameOne = 'bad_name_one',
  NameTwo = 'bad_name_two',
}

// 自动生成枚举值的字符串字面量联合类型
export type CurrentExample = typeof Example[keyof typeof Example];

此时CurrentExample就完全等价于'bad_name_one' | 'bad_name_two'，VSCode会正常触发字符串补全。

方法2：直接使用枚举成员进行判断

如果业务场景允许，直接用枚举成员作为判断条件，IntelliSense也会正常补全枚举成员选项：

if (currentExample === Example.NameOne) {
  // 执行逻辑
}

内容的提问来源于stack exchange，提问作者meez