Vue3 + TypeScript 插件类型增强实现示例求助

嘿，我完全懂你折腾3小时的崩溃——Vue3的类型系统和Vue2差异真的很大，老方法直接套用肯定行不通。咱们一步步把你的代码改对，让this.$hello能被TypeScript和Vue CLI正确识别。

问题核心原因 #

你现在的代码有两个关键错误：

1. 类型声明的模块选错了：Vue2里扩展vue/types/vue的Vue接口，但Vue3已经改用@vue/runtime-core中的ComponentCustomProperties来扩展组件实例的全局属性。
2. 插件挂载方式不匹配：你用了app.provide，但组件里直接通过this.$hello访问——provide的变量需要用inject获取，如果你想让它成为全局可用的实例属性，应该用app.config.globalProperties。

完整可运行示例 #

1. 插件实现（src/hello.ts）

我们调整插件逻辑，把helloModule挂载到全局属性上，同时添加正确的类型声明：

import { App, Plugin } from "vue";

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

export const helloPlugin: Plugin = (app: App) => {
  const helloModule: IHelloModule = {
    sayHello: (name: string) => `Hello ${name}`
  };

  // 挂载到全局属性，让所有组件实例都能通过this.$hello访问
  app.config.globalProperties.$hello = helloModule;
};

// 类型增强：扩展Vue组件实例的全局属性类型
declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $hello: IHelloModule;
  }
}

2. 组件中使用（src/views/Home.vue）

vue-class-component在Vue3中可以正常使用，现在this.$hello会被TS正确识别：

<template>
  <div class="home">
    <p>{{ greeting }}</p>
  </div>
</template>

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

@Options({})
export default class Home extends Vue {
  greeting = '';

  mounted() {
    this.greeting = this.$hello.sayHello('World');
    console.log(this.greeting); // 输出 "Hello World"
    // 现在TS和Vue CLI都不会报错了！
  }
}
</script>

3. 入口文件挂载插件（src/main.ts）

注意use方法需要单独调用每个插件，不能合并传递：

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

const app = createApp(App);
app.use(router);
app.use(helloPlugin); // 单独挂载插件
app.mount("#app");

如果你确实想用Provide/Inject的场景 #

如果你原本的意图是用Provide/Inject而非全局属性，那需要调整组件用法并增强注入Key的类型：

插件文件修改

import { App, Plugin, InjectionKey } from "vue";

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

// 创建类型化的注入Key，必须用Symbol保证唯一性
export const helloKey: InjectionKey<IHelloModule> = Symbol('hello');

export const helloPlugin: Plugin = (app: App) => {
  const helloModule: IHelloModule = {
    sayHello: (name: string) => `Hello ${name}`
  };

  app.provide(helloKey, helloModule);
};

组件中使用Inject

<template>
  <div class="home">
    <p>{{ greeting }}</p>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { inject } from 'vue';
import { helloKey, IHelloModule } from '@/hello';

@Options({})
export default class Home extends Vue {
  greeting = '';
  helloModule?: IHelloModule;

  mounted() {
    this.helloModule = inject(helloKey);
    if (this.helloModule) {
      this.greeting = this.helloModule.sayHello('World');
      console.log(this.greeting);
    }
  }
}
</script>

关键注意事项 #

• 确保你的tsconfig.json中包含了src/**/*.d.ts，让TypeScript能识别自定义类型声明。
• Vue3的全局属性类型增强必须针对@vue/runtime-core的ComponentCustomProperties，不能再用Vue2的vue/types/vue模块。
• 要使用vue-class-component的Vue3兼容版本，确保依赖是^8.x及以上。

内容的提问来源于stack exchange，提问作者gevik