Коллекция перечислений в TypeScript

Question

Я работаю с 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>

Возможно ли это? Если нет, то есть ли лучший способ «собрать» все возможные перечисления в одном месте?