TypeScript complains about existing Vue component property defined with vue-property-decorator

Question

I have a Vue component that has a property defined using a decorator:

import { Component, Vue } from "vue-property-decorator"
@Component({
             props: {
               myId: String,
             },
           })
class TestProp extends Vue {
  myFunction(obj: any) {
    return obj[this.myId] // here tslint complains: "Property 'myId' does not exist on type 'TestProp'."
  }
}

I can avoid the type error by converting this to any:

  myFunction(obj: any) {
    return obj[(this as any).myId]
  }

But this is rather a work around than a solution.

I guess compiler isn't aware of the properties defined by the @Component decorator?

Any ideas?

Answer 1

I recommend you to use this library: https://github.com/kaorun343/vue-property-decorator

With this you can declare your prop inside your component class.

For example:

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

@Component
class TestProp extends Vue {
  @Prop(String) myId: string!
}