时间戳

首页 > 解决方案 > TypeScript 中的枚举集合

typescript - TypeScript 中的枚举集合

问题描述

我使用 Vue.js，所以这个问题特别涉及 Vue 组件。在我的代码中有一些实例，我想将某些内容与枚举进行比较。这在 .vue 文件的脚本部分可以正常工作，但不能在 html 部分工作，这意味着：

<template>
    <v-app>
        {{MyEnum.EnumMemberOne}}
    </v-app>
</template>

会导致错误：[Vue warn]: Property or method "MyEnum" is not defined on the instance but referenced during render. ...

所以我必须在我的脚本中这样做才能访问我的枚举：

import {MyEnum} from "@/types";

@Component({
    components: {}
})
export default class App extends Vue {
    myEnum = MyEnum;
}

然后我可以简单地myEnum在 html 部分中使用我的枚举。不太烦人，但我的问题是我会有很多枚举，我不想为每个组件中的每个枚举手动创建变量。

所以我想做的基本上是拥有一个枚举集合，这样无论我有多少枚举，也不管我实际上想在每个组件中使用哪些枚举，它们都是可用的。

所以在我的 types.ts 文件（我定义所有接口和枚举）中，我想做这样的事情：

export enum MyEnum1 {
    EnumMemberOne,
    EnumMemberTwo,
}

export enum MyEnum2 {
    EnumMemberOne,
    EnumMemberTwo,
}

export interface EnumCollection {
    MyEnum1: MyEnum1;
    MyEnum2: MyEnum2;
}

因此，在每个组件中，我都可以这样做：enumCollection = EnumCollection;

并在 html 部分中使用它，如下所示：

<template>
    <v-app>
        {{enumCollection.MyEnum1.EnumMemberOne}}
    </v-app>
</template>

那可能吗？如果没有，有没有更好的方法在一个地方“收集”所有可能的枚举？

标签： typescriptvue.js

解决方案

我需要类似的东西，但我希望所有枚举都在它们自己的文件中，所以有一个常量文件将它们捆绑在一起：

在常量.ts 中：

export * from '@/app/constants/MyEnum1';
export * from '@/app/constants/MyEnum2';
export * from '@/app/constants/MyEnum3';

在 MyEnum1.ts、MyEnum2.ts 等中：

export enum MyEnum1 {
    EnumMemberOne,
    EnumMemberTwo,
}

在我的主文件中的某处：

import { createApp }       from 'vue';
import { App as VueApp }   from 'vue';
import * as constants      from '@/app/constants/Constants';

// ....

const vueApp:VueApp<Element> = createApp(AppVue);

vueApp.config.globalProperties.const = constants;

// ....

现在您可以const.xxx在应用程序的任何位置使用任何模板：

<template>
    <v-app>
        {{const.MyEnum1.EnumMemberOne}}
    </v-app>
</template>

PS：上面的代码来自一个 Vue3 项目，但类似的东西也应该适用于 Vue2

推荐阅读