Property does not exist on the type in vue-class-component

Question

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?

Shumway

Answer 1

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>

Inattentive

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. – Shumway

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. – Shumway

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. – Inattentive

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. – Shumway

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 they declare count on linenumber 65. – Inattentive

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. – Shumway

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. – Inattentive