How to use provide/inject with TypeScript but without vue-class-component

Question

When I use provide/inject with class components everything works as expected. But when I use it in a "normal" vue component I get type-errors.

In this example I get errors when referencing this.testService. The code works though.

export default Vue.extend({
  name: "HelloWorldBasic" as string,
  inject: ["testService"],

  computed: {
    message(): string | null {
      return this.testService ? this.testService.hello() : null;
    }
  }
});

Where did I make my mistake? How should I write the code?

I set up a small project to be able to reproduce it and work with it:

$ git clone [email protected]:schnetzi/vue-provide-inject.git
$ npm ci
$ npm start

Answer 1

This is a bit tricky to do, but it is possible using the same workaround that is commonly used for mixins, which entails defining an interface for whatever you want to add to the Vue instance.

In your case, here's how it would be done:

import Vue_ from 'vue';
import MyTestServiceType from 'wherever/it/is';

interface HelloWorldBasicInjected {
  testService: MyTestServiceType
}

const Vue = Vue_ as VueConstructor<Vue_ & HelloWorldBasicInjected>
export default Vue.extend({
  name: "HelloWorldBasic" as string,
  inject: ["testService"],

  computed: {
    message(): string | null {
      return this.testService ? this.testService.hello() : null;
    }
  }
});