Question about Vue 3 + TypeScript and Augmenting-Types-for-Use-with-Plugins

For what I understand, vue-class-component doesn't fully supports Vue 3 yet. They're still discussing modifications in the library. So, I don't know if the examples below will work with it, but this is what I've done to augment plugin types.

hello.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;  }}

I declared the type in the plugin file itself, but you can declare them in the shims-vue.d.ts file too.

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

Hello.vue

<script lang="ts">import { defineComponent } from "vue";const Hello = defineComponent({  mounted() {    console.log(this.$hello.sayHello("World"));  }});export default Hello;</script>