It seems `Vue.extend` does not support injected data.

[ndr47]

I am trying to have typescript support on my Nuxt project. Until now it seems a very hard task.

I understood that I have to use Vue.extend when returning the component data like so:

import Vue from 'vue';

type Data = {
 a: number
}

export default Vue.extend({
 data():Data{
  const a = 3;
  return {
   a
  }
 }
})

However if my component have injected properties, it does not attach those properties to this type.

import Vue from 'vue';

type Data = {
 a: number
}

export default Vue.extend({
 
 inject: ['b'],
 
 data():Data{
  const a = 3;
  const c = this.b
            ^^^^
            // ~~ Property 'b' does not exist on type 'Readonly<Record<never,any>> & Vue' 
  return {
   a
  },
 
  methods:{
   my_method(){
     this.a // no problem here
     this.b // Error here
   }
  }

 }
})

Shouldn't infer also the injected type?

I am forced to use:

const that = this as any;

that I would like to avoid.

[ndr47]

I found out that I can use generics like so:

import Vue from 'vue';

type Data = {
 a: number
}

type Methods = {
 my_method: () => void
}

type Computed = {}

type Props = {
 b: string
}

export default Vue.extend<Data, Methods, Computed, Props>({
 
 inject: ['b'],
 
 data():Data{
  const a = 3;
  const c = this.b // OK now
  return {
   a
  },
 
  methods:{
   my_method(){
     this.a 
     this.b
   }
  }

 }
})