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?

please share complete error details

Naga Sai A
– Naga Sai A

2019-07-26 17:05:47 +00:00
Commented Jul 26, 2019 at 17:05 — Naga Sai A
– Naga Sai A, Commented Jul 26, 2019 at 17:05

coffidev · Accepted Answer · 2019-07-26 17:17:25Z

3

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

answered Jul 26, 2019 at 17:17

coffidev

9998 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruan Mendes Over a year ago

I added the other answer, but this is what I was looking for and didn't find. Vue needs to convert to this way instead of a single decorator

Peter T. Over a year ago

This way to declare properties is really nice, thanks!

Ruan Mendes · Accepted Answer · 2019-07-26 17:15:37Z

1

The TypeScript example states that you must document them yourself in the component.

From that page

  // additional declaration is needed
  // when you declare some properties in `Component` decorator

import { Component, Vue } from "vue-property-decorator"
@Component({
  props: {
    myId: String,
  },
})
class TestProp extends Vue {

  myId: string;

  myFunction(obj: any) {
    return obj[this.myId] // here tslint complains: "Property 'myId' does not exist on type 'TestProp'."
  }
}

answered Jul 26, 2019 at 17:15

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

2 Comments

Peter T. Over a year ago

Thanks for pointing at this example. However, in the example the propMessage isn't declared again in the class ...

Ruan Mendes Over a year ago

It is wrong in that example, it won't compile of you use it

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related