Vue JS typescript 组件找不到注入实例属性 [英] Vue JS typescript component cannot find inject instance properties

问题描述

我正在使用 typescript 和 vue.

I'm working with typescript and vue.

在我的应用中有一个 service，它是每个子组件的全局变量.

In my app there is a service which is a global for every sub component.

我在 vue 上找到了这个原生 vue 解决方案JS 将这个属性注入到子组件上.

I found this native vue solution on vue JS to inject this property on the child components.

在 main.ts 上

on main.ts

const service = new MyService(...);

new Vue({
  router,
  provide() { return { service }; } // provide the service to be injected
  render: h => h(App),
}).$mount("#app");

在任何 typescript vue 组件上

on any typescript vue component

import Vue from "vue";

export default Vue.extend({
  inject: ["service"], // inject the service
  mounted() {
    console.log(this.service); // this.service does exists 
  },
});

这样我就可以在我的子组件上获得注入的 service.

This way I'm able to get the injected service on my Child components.

但是我遇到了空闲错误

CombinedVueInstance <"类型上不存在属性service"Vue、{}、{}、{}、只读 <记录<从不，任何 > > >'.

Property 'service' does not exist on type 'CombinedVueInstance < Vue, {}, {}, {}, Readonly < Record < never, any > > >'.

如何解决这个打字稿编译错误?

How can I solve this typescript compilation error?

推荐答案

使用 Vue 属性装饰器

Vue-property-decorator，它在内部从 vue-class-component，公开一系列提供真正智能感知的打字稿装饰器.不过，您必须使用类 api.

 Using Vue property decorator

Vue-property-decorator, which internally re-exports decorators from vue-class-component, expose a series of typescript decorators that give really good intellisense. You must use the class api though.

@Inject 和 @Provide 是两个这样的装饰器:

@Inject and @Provide are two of such decorators:

在提供者中:

import {Vue, Component, Provide} from 'vue-property-decorator';

@Component
export default class MyClass {
  @Provide('service') service: Service = new MyServiceImpl(); // or whatever this is
}

在提供的组件中:

import {Vue, Component, Inject} from 'vue-property-decorator';

@Component
export default class MyClass {
  @inject('service') service!: Service; // or whatever type this service has
  mounted() {
    console.log(this.service); // no typescript error here
  },
}

我认为这是最佳解决方案，因为它在使用 Vue 时提供了更好的智能感知.

This I think is the optimal solution, in the sense it gives the better intellisense available when working with Vue.

然而，现在您可能不想更改所有组件的定义，或者由于外部限制根本无法更改.在这种情况下，您可以执行下一个技巧:

Now, however, you may don't want to change the definition of all your components or simply cannot due to external constraints. In such case you can do the next trick:

每当您要使用 this.service 时，您都可以将 this 转换为 any.可能不是最好的事情，但它有效:

You can cast this to any whenever you're about to use this.service. Not probably the best thing, but it works:

  mounted() {
    console.log((this as any).service);
  },

肯定还有其他方法，不过我已经不习惯Vue.extends api了.如果您有时间和机会，我强烈建议您切换到类 API 并开始使用 vue-property-decorators，它们确实提供了最好的智能感知.

There must be other ways, but I'm not used to Vue.extends api anymore. If you have the time and the opportunity, I strongly suggest you to switch to the class API and start using the vue-property-decorators, they really give the best intellisense.

这篇关于Vue JS typescript 组件找不到注入实例属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！