Vue对象式组件中TypeScript编译器无法识别注入属性

嘿，我完全懂你碰到的这个坑——在Vue选项式API里用TypeScript时，明明服务已经正确注入了，编译器却硬说this.sampleService不存在，对吧？这其实是TypeScript的类型检查机制在搞事情，默认情况下它不知道你全局注入的服务属于组件实例的一部分。

问题根源 #

在JavaScript版本里，没有类型检查所以不会报错；类组件风格的TypeScript可能用了装饰器（比如@Inject）或者手动扩展了组件类型，所以编译器能识别到服务。但选项式API的TS代码中，this的默认类型是Vue内置的ComponentCustomProperties，这个接口里并没有包含你自定义注入的服务，所以编译器就会报错说属性不存在。

具体解决方案 #

1. 全局扩展Vue组件的类型声明

最通用的方法是扩展Vue的类型系统，让所有组件都能识别到这个注入的服务。你需要在项目里创建一个类型声明文件（比如src/vue.d.ts）：

// 引入你的服务类型
import { SampleService } from './services/sample-service';

// 扩展@vue/runtime-core里的ComponentCustomProperties接口
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    // 这里添加你的服务属性和对应类型
    sampleService: SampleService;
  }
}

// 必须导出空对象，确保这个文件被当作模块处理
export {};

这个声明会告诉TypeScript：所有Vue组件的this实例上都存在一个sampleService属性，类型就是你的SampleService。

2. 确保注入和提供的逻辑正确

先确认你在应用初始化时正确提供了服务：

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { SampleService } from './services/sample-service';

const app = createApp(App);
// 用provide注册服务，key要和组件里inject的key对应
app.provide('sampleService', new SampleService());

app.mount('#app');

然后在组件里用inject选项引入：

// 你的组件.vue
export default {
  // 注入服务
  inject: ['sampleService'],
  mounted() {
    // 现在编译器不会再报错了
    console.log(this.sampleService.someMethod());
  }
}

如果不想全局扩展类型，也可以用inject函数的泛型版本局部处理：

import { inject } from 'vue';
import { SampleService } from './services/sample-service';

export default {
  mounted() {
    // 用泛型指定类型，同时做非空判断
    const sampleService = inject<SampleService>('sampleService');
    if (sampleService) {
      sampleService.someMethod();
    }
  }
}

3. 检查TypeScript配置

确保你的tsconfig.json包含了这个类型声明文件，比如：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "types": ["@vue/runtime-core"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/**/*.d.ts" // 确保类型声明文件被包含
  ]
}

额外注意点 #

• 如果你的服务用了Symbol作为注入的key，那类型声明里也要对应使用Symbol：

  // services/sample-service.ts
  export const SampleServiceKey = Symbol('SampleService');
  
  // vue.d.ts
  import { SampleService, SampleServiceKey } from './services/sample-service';
  
  declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      [SampleServiceKey]: SampleService;
    }
  }
  

• 如果你用的是Vue 2，扩展的是Vue接口而不是ComponentCustomProperties：

  declare module 'vue/types/vue' {
    interface Vue {
      sampleService: SampleService;
    }
  }
  

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