Utilizzo di globalProperties in Vue 3 e Typescript

Question

Ho aggiunto una proprietà globale in main.ts e sto cercando di accedervi in ​​un componente. tuttavia ricevo l'errore:

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

Penso di aver bisogno di aumentare il tipo, il dattiloscritto considera $ const come qualsiasi tipo in questo momento, tuttavia non so come farlo in Vue 3 e non c'è menzione nei documenti.

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>

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Ho appena risposto a una domanda simile ma parafraserò qui:

Puoi aumentare il @vue/runtime-coremodulo TypeScript nella tua applicazione:

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

simile a come funzionava in Vue 2.

Controlla il ComponentCustomPropertiescodice sorgente dell'interfaccia per ulteriori informazioni.