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屋!