Usando globalProperties no Vue 3 e Typescript

Question

Eu adicionei uma propriedade global em main.ts e estou tentando acessá-la em um componente. no entanto, estou recebendo o erro:

Property '$const' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.Vetur(2339)

Acho que preciso aumentar o tipo, o typescript considera $ const como qualquer tipo agora, no entanto, não sei como fazer isso no Vue 3 e não há menção nos documentos.

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import * as constants from "@constants";

const app = createApp(App);

app.config.globalProperties.$const = Object.freeze(constants);

app.use(store);

app.mount("#app");

componente

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Header",

  computed: {
    tags() {
      return Object.entries(this.$const.TAGS);
    }
  }
});
</script>

Qualquer ajuda seria apreciada.

Answer 1

Eu apenas respondi uma pergunta semelhante, mas vai parafrasear aqui:

Você pode aumentar o @vue/runtime-coremódulo TypeScript em seu aplicativo:

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $const: Record<string, unknown>;
  }
}

semelhante a como funcionava no Vue 2.

Verifique o ComponentCustomPropertiescódigo-fonte da interface para obter mais informações.