Utilisation de globalProperties dans Vue 3 et Typescript

Question

J'ai ajouté une propriété globale dans main.ts, et j'essaie d'y accéder dans un composant. cependant j'obtiens l'erreur:

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

Je pense que j'ai besoin d'augmenter le type, dactylographié considère $ const comme étant n'importe quel type pour le moment, mais je ne sais pas comment faire cela dans Vue 3 et il n'y a aucune mention dans la documentation.

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");

composant

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

export default defineComponent({
  name: "Header",

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

Toute aide serait appréciée.

Answer 1

Je viens de répondre à une question similaire mais je vais paraphraser ici:

Vous pouvez augmenter le @vue/runtime-coremodule TypeScript dans votre application:

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

similaire à la façon dont cela fonctionnait dans Vue 2.

Consultez le ComponentCustomPropertiescode source de l' interface pour plus d'informations.