Vue JS typescript component cannot find inject instance properties

Question

I'm working with typescript and vue.

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

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

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

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 
  },
});

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

However I'm getting the fallowing error

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

How can I solve this typescript compilation error?

Answer 1

 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 and @Provide are two of such decorators:

In the provider:

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

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

In the provided component:

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
  },
}

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:

Casting this

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);
  },

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.

Answer 2

Using plugins

If you whant to use some service in all Vue components, you can try to use plugins.
In main.ts you just import it:

import Vue from "vue";
import "@/plugins/myService";

In plugins/myService.ts you must write someting like this:

import _Vue from "vue";
import MyService from "@/services/MyService";

export default function MyServicePlugin(Vue: typeof _Vue, options?: any): void {
    Vue.prototype.$myService = new MyService(...); // you can import 'service' from other place
}

_Vue.use(MyServicePlugin);

And in any vue component you can use this:

<template>
  <div> {{ $myService.name }}</div>
</template>
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";

  @Component
  export default class MyComponent extends Vue {
    private created() {
      const some = this.$myService.getStuff();
    }
  }
</script>

Don't forget to declare $myService on d.ts file. Somewhere in your project add file myService.d.ts with the following content:

import MyService from "@/services/MyService";

declare module "vue/types/vue" {
  interface Vue {
      $myService: MyService;
  }
}

Answer 3

You don't need to use class components in order to get this. For object component declaration you have two ways of doing it:

Patching data return type

export default {
  inject: ['myInjection'],
  data(): { myInjection?: MyInjection } {
    return {}
  },
}

The downside is that you'll have to mark it as optional to be able to add it do data return.

Extending Vue context

declare module 'vue/types/vue' {
  interface Vue {
    myInjection: MyInjection
  }
}

export default {
  inject: ['myInjection'],
}

Answer 4

Extend Vue for injected components only

Create an interface for the injection and extend Vue for the specific components where it is needed:

main.ts:

const service = new MyService(...);

export interface ServiceInjection {
  service: MyService;
}

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

A components that uses your interface

import Vue from "vue";
import { ServiceInjection } from 'main.ts';

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