TypeScript中如何为枚举本身添加正确的类型提示？

嘿，这个问题其实挺常见的，我来帮你捋清楚～

问题根源 #

你遇到的报错核心是类型不匹配：

• RecurringEventDeleteOptions是枚举的成员类型，代表单个枚举值的类型（比如1、2、3对应的类型）；
• 而你赋值给foo的是枚举本身这个对象，它的类型是typeof RecurringEventDeleteOptions（包含所有枚举成员作为属性的对象类型）。

直接把枚举对象赋值给类型为枚举成员的变量，TypeScript自然会抛出类型不兼容的错误。

解决方案 #

只需要把foo的类型指定为typeof RecurringEventDeleteOptions，就能让类型完美匹配，同时保留完整的枚举成员提示：

<template>
  <div>
    {{ foo.THIS_EVENT }} <!-- 这里可以正常访问枚举成员，且有清晰的类型提示 -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

enum RecurringEventDeleteOptions {
  THIS_EVENT = 1,
  THIS_AND_FUTURE_EVENTS = 2,
  ALL_EVENTS = 3,
}

@Component
export default class FooClass extends Vue {
  // 指定类型为枚举对象的类型，和赋值内容完全匹配
  public foo: typeof RecurringEventDeleteOptions = RecurringEventDeleteOptions;
}
</script>

补充说明 #

如果你的需求是让foo代表单个枚举值（而非整个枚举对象），那应该这样写：

public foo: RecurringEventDeleteOptions = RecurringEventDeleteOptions.THIS_EVENT;

但显然你的场景是要在Vue模板中访问所有枚举选项，所以第一种方案完全符合你的需求。

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