The TypeScript compiler is unable to locate the injected property within a Vue Object Component

Question

The TypeScript compiler is unable to locate the injected property within a Vue Object Component

Struggling with a work example involving injecting a service during Vue's bootstrapping process.

Everything "works" fine in my JavaScript and Class-Component TypeScript versions. However, when using the Vue object API with TypeScript, the compiler throws an error saying that this.sampleService does not exist in my component.

Am I overlooking something?

<template>
  <div class="app">
    {{message}} <fake-button :text="buttonText" @some-click-event="handleClickEvent"></fake-button>
  </div>
</template>

<style lang="scss">
  .app {
    $background-color: #9f9;
    $foreground-color: #000;
    background: $background-color;
    color: $foreground-color;
  }
</style>

<script lang="ts">
  import Vue from 'vue'

  const App = Vue.extend({
    components: {
      FakeButton: () => import('@client/components/fake-button/fake-button-object-typescript.vue')
    },
    data: function () {
      return {
        message: 'Hello World - App Object TypeScript',
        buttonText: 'Click Me'
      };
    },
    inject: {
      sampleService: 'sampleService'
    },
    methods: {
      handleClickEvent(someVal?: string) {
        console.log('App', 'handleClickEvent', someVal);
      }
    },
    beforeCreate() {
      console.log('App', 'beforeCreate');
    },
    created() {
      console.log('App', 'created');
    },
    mounted() {
      console.log('App', 'mounted');
      // TODO: While this compiles, TypeScript complains that it doesn't exist
      console.log('this.sampleService.getDate()', this.sampleService.getDate());
    }
  });

  export default App;
</script>

ERROR in vue-test/src/client/containers/app/app-object-typescript.vue.ts
    [tsl] ERROR in vue-test/src/client/containers/app/app-object-typescript.vue.ts(35,56)
          TS2339: Property 'sampleService' does not exist on type 'CombinedVueInstance<Vue, { message: string; buttonText: string; }, { handleClickEvent(someVal?: s...'.

api typescript object vue.js inject

Answer 1

Answer №1

To tackle this issue, I devised a strategy involving the creation of an interface for the injection process. In a hypothetical scenario, this approach would look something like the following:

<script lang="ts">
import { CustomServiceInjection } from '...';

const App = ( Vue as VueConstructor<Vue & CustomServiceInjection> ).extend({
  inject: {
    customService: 'customService'
  } as Record<keyof CustomServiceInjection, string>,
  // etc.
});
</script>

Furthermore, you can implement this very interface in the component that offers the service:

export interface CustomServiceInjection {
  customService: CustomService; // or any other type associated with your service
}

export default Vue.extend({
  provide(): CustomServiceInjection {
    return {
      customService: new CustomService(),
    };
  },
  // etc.
});

Answer 2

To tackle this issue, I devised a strategy involving the creation of an interface for the injection process. In a hypothetical scenario, this approach would look something like the following:

<script lang="ts">
import { CustomServiceInjection } from '...';

const App = ( Vue as VueConstructor<Vue & CustomServiceInjection> ).extend({
  inject: {
    customService: 'customService'
  } as Record<keyof CustomServiceInjection, string>,
  // etc.
});
</script>

Furthermore, you can implement this very interface in the component that offers the service:

export interface CustomServiceInjection {
  customService: CustomService; // or any other type associated with your service
}

export default Vue.extend({
  provide(): CustomServiceInjection {
    return {
      customService: new CustomService(),
    };
  },
  // etc.
});

Answer 3

Answer №2

Consider including the provide method in your code. See the example below. It is recommended to utilize vue-property-decorator when working with typescript.

inject: {
      sampleService: 'sampleService'
    },
provide () {
    return {
      sampleService: this.sampleService,
    }
  }

Answer 4

Consider including the provide method in your code. See the example below. It is recommended to utilize vue-property-decorator when working with typescript.

inject: {
      sampleService: 'sampleService'
    },
provide () {
    return {
      sampleService: this.sampleService,
    }
  }

The TypeScript compiler is unable to locate the injected property within a Vue Object Component

Answer №1

Answer №2

Similar questions

TypeScript properties for styled input component

Mastering Vuex: effectively managing intricate data structures and dynamic state transformations

Transmitting PHP object through AJAX

What steps should I take to ensure that TypeScript acknowledges the validity of my object assignment?

The Laravel and Vue fetch operation is yielding no results on the front end, despite the data being successfully

Converting a JSON array stored in a local file to a TypeScript array within an Angular 5 project

Setting up the CSS loader in a Vue.js project using webpack

What is the method to modify the background color of el-pagination?

Vue: The function "priceFilter" is not defined in this context

Angular2 Interactive Modal Pop Up

vue.js does not recognize the property or method

VS Code fails to identify Typescript internal modules

What is the best way to transform an array of objects into a nested array through shuffling

Discovering the correct way of utilizing Vuelidate's minValue and maxValue functionality

Arranging in ascending and descending sequence in Angular2

Upon the second click, the addEventListener function is triggered

The event bus for the custom Modal in Vuejs is failing to trigger

TypeScript: defining a custom type with a collection of properties following a consistent pattern

What is the best way to parse JSON data with Typescript?

Receiving a "Maximum call exceeded" error when using Vue.js router guards for the beforeEach hook