10

I got an error in my TypeScript component file that a prop doesn't exist, but I declared the prop exactly as described in the vue-class-component documentation example.

Property 'propMessage' does not exist on type 'MyComponent'.Vetur(2339)

How do I fix this?

screenshot of error

tony19
  • 125,647
  • 18
  • 229
  • 307
Jon Sud
  • 10,211
  • 17
  • 76
  • 174

1 Answers1

2

The documentation you linked states:

Following is the example written in Babel. If you are looking for TypeScript version, it's in the example directory.

Example:

<script lang="ts">
    import Vue from 'vue';
    import { Component } from 'vue-class-component';

    const AppProps = Vue.extend({
      props: {
        propMessage: String
      }
    })

    @Component
    export default class YourComponent extends AppProps {

        get something() {
            return this.propMessage;
        }
    }
</script>
JKL
  • 978
  • 7
  • 21
  • Noooo.. I know I can do that. but why the vue-class-component not working? This is a simple case of `Prop`, but in complex case of `computed` and `mapGetter` is not work as well. – Jon Sud Sep 12 '19 at 08:06
  • So I need to declare `Vue.extend` for every component? make a two components every time I want to use `prop` or `mapGetters` or use vue-class-component? if so, its better if I don't use `vue-class-component` at all. Any other solution? why the example code doesn't work? I need the example to work as expected. – Jon Sud Sep 12 '19 at 08:19
  • To make the example work you should do exactly what is described in the paragraph 'usage' in the documentation you provided. Side note is that under the example they tell you might want to check out `vue-property-decorator` like I suggested in my pre-edited answer. – JKL Sep 12 '19 at 08:26
  • 1
    But `computed: mapState([ 'count' ]),` also I have the same error: `Property 'count' does not exist on type 'MyComponent'.Vetur(2339)` so still the problem exist. it is regardless to typescript and extend. – Jon Sud Sep 12 '19 at 08:41
  • I'm not sure what your code looks like now with the `computed: mapState([ 'count' ])` so maybe you can make a minimal example on some website like jsfiddle? Note that in [the typescript example](https://github.com/vuejs/vue-class-component/blob/master/example/src/App.vue) they declare `count` on linenumber 65. – JKL Sep 12 '19 at 08:50
  • Here try it your self: simple getter: `@Component({ computed: { count() { return 'blabla'; } } ….` and on function inside the class: `blabla() { const y = this.count; }`. same problem. – Jon Sud Sep 12 '19 at 08:57
  • To get a computed property use a getter in your class. So instead of `@Component({ computed: { count() { return 'blabla'; } }` add `get count() { return 'blabla'; }` to your class to create a computed property. – JKL Sep 12 '19 at 09:20