Question sur Vue 3 + TypeScript et Augmenting-Types-for-Use-with-Plugins

Question

Est-ce que quelqu'un connaît un exemple de travail de la façon dont l'augmentation de type devrait être implémentée avec Vue3 et TypeScript? J'ai essayé de suivre les documents Vue2 dans des cerceaux d'utiliser la même chose dans Vue3 sans succès et de passer les 3 dernières heures à rechercher sans aucun résultat.

Il semble que l' Vueobjet dans le vue-class-componentmodule devrait être augmenté pour fonctionner, mais comment?

Ma mise en œuvre est similaire à la suivante:

Aucun conseil?

https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

import { App, Plugin } from "vue";

export interface IHelloModule {
  sayHello: (name: string) => string;
}

export const helloPlugin: Plugin = (app: App, options) => {

  const helloModule:IHelloModule = {

    sayHello: function(name: string) {
      return `Hello ${name}`; } }; app.provide("$hello", helloModule);
};

import { Vue } from 'vue-class-component';
import { IHelloModule } from "@/hello";

declare module "vue/types/vue" {
  interface Vue {
    $hello: IHelloModule; } } declare module "vue/types/vue" { interface VueConstructor { $auth: IHelloModule;
  }
}

<template>
  <div class="home">
     .....
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  components: {
  },
})
export default class Home extends Vue {
  mounted() {
    console.log(this.$hello.sayHello("World"))
                     ^^^^^^^^^^^^^^^^^^^^^^^^^^
                     Neither TS nor vue-cli recognize this
  }
}
</script>

import { createApp } from "vue";
import App from "./App.vue";
import { helloPlugin } from "./hello";
import router from "./router";

createApp(App)
  .use(router, helloPlugin)
  .mount("#app");

Answer 1

Pour ce que je comprends, vue-class-componentne prend pas encore totalement en charge Vue 3. Ils discutent toujours des modifications dans la bibliothèque. Donc, je ne sais pas si les exemples ci-dessous fonctionneront avec, mais c'est ce que j'ai fait pour augmenter les types de plugins.

bonjour.plugin.ts

import { App } from "vue";

export interface IHelloModule {
  sayHello: (name: string) => string;
}

export default {
  install: (app: App) => {
    const helloModule: IHelloModule = {
      sayHello: function(name: string) {
        return `Hello ${name}`; } }; app.config.globalProperties.$hello = helloModule;
  }
}

declare module "@vue/runtime-core" {
  //Bind to `this` keyword
  interface ComponentCustomProperties {
    $hello: IHelloModule;
  }
}

J'ai déclaré le type dans le fichier du plugin lui-même, mais vous pouvez également les déclarer dans le shims-vue.d.tsfichier.

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Hello from "./hello.plugin";

createApp(App)
  .use(router)
  .use(Hello)
  .mount("#app");

Bonjour.vue

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

const Hello = defineComponent({
  mounted() {
    console.log(this.$hello.sayHello("World"));
  }
});

export default Hello;
</script>