Cannot use @Prop() Decorator

[smholsen]

Hi,
I am in the midst of trying to rewrite my hobby project from js to ts, and I am currently trying to use the @prop decorator in my component using the code below;

<template>
...
</template>
<script lang="ts">

    import Vue from "vue";
    import Component from "vue-class-component";
    import {Prop} from "vue-property-decorator";

    @Component({
        name: "Additional"
    })

    export default class Additional extends Vue {
        notes: string = '';

        @Prop() value: any;
 }
</script>

But I get the following error in my IDE;

Argument of type 'Additional' is not assignable to parameter of type 'Vue'.
  Types of property '$options' are incompatible.
    Type 'Vue.ComponentOptions<import("/{...}/node_modules/vue/types/vue").Vue, import("/{...}/node_modules/vue/types/options").DefaultData<import("/{...}/node_modules/vue/types/vue").Vue>, import("/Users/{username}/proj...' is not assignable to type 'import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/options").ComponentOptions<import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/vue").Vue, import("/{...}/node_...'.
      Types of property 'methods' are incompatible.
        Type 'import("/{...}/node_modules/vue/types/options").DefaultMethods<import("/{...}/node_modules/vue/types/vue").Vue> | undefined' is not assignable to type 'import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/options").DefaultMethods<import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/vue").Vue> | undefined'.
          Type 'import("/{...}/node_modules/vue/types/options").DefaultMethods<import("/{...}/node_modules/vue/types/vue").Vue>' is not assignable to type 'import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/options").DefaultMethods<import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/vue").Vue>'.
            Index signatures are incompatible.
              Type '(this: import("/{...}/node_modules/vue/types/vue").Vue, ...args: any[]) => any' is not assignable to type '(this: import("/{...}/node_modules/vue-property-decorator/node_modules/vue/types/vue").Vue, ...args: any[]) => any'.
                The 'this' types of each signature are incompatible.
                  Type 'Vue' is missing the following properties from type 'Vue': $router, $route, $storeVetur(2345)

Do you have any suggestions or ideas on what is going wrong here?
Any tips on where to start debugging this issue?

[asbermudez]

@smholsen This PR solves the issue...
#246

I hope that @kaorun343 checks it soon

[smholsen]

I am not using a modified Vue type though, what is the supported type, and how can I make sure that I am on the supported version?

…

On Mon, 26 Aug 2019, 17:07 Aram Sabatés, ***@***.***> wrote: @smholsen <https://github.com/smholsen> This PR solves the issue... #246 <#246> I hope that @kaorun343 <https://github.com/kaorun343> checks it soon — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#250?email_source=notifications&email_token=AANEIATXI3DJ7BG6LS6WYATQGPWS5A5CNFSM4IPQJTBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5EVBAQ#issuecomment-524898434>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AANEIAWAAO77SFZXHEGXMN3QGPWS5ANCNFSM4IPQJTBA> .

[asbermudez]

You can use the 'props' property in the 'Component' decorator. Like: @component({ props: (whatever config based on official Vue documentation) }); This should solve the problem for now. The issue of that PR is that there are some libraries of Vue (even official) that extend the base type and the decorators don't inherit from them but from the 'core', so then you get that error that you're missing something. Let me know if it works for you :)

…

On Mon, Aug 26, 2019, 17:33 Simon Olsen ***@***.***> wrote: I am not using a modified Vue type though, what is the supported type, and how can I make sure that I am on the supported version? On Mon, 26 Aug 2019, 17:07 Aram Sabatés, ***@***.***> wrote: > @smholsen <https://github.com/smholsen> This PR solves the issue... > #246 <#246> > > I hope that @kaorun343 <https://github.com/kaorun343> checks it soon > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #250?email_source=notifications&email_token=AANEIATXI3DJ7BG6LS6WYATQGPWS5A5CNFSM4IPQJTBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5EVBAQ#issuecomment-524898434 >, > or mute the thread > < https://github.com/notifications/unsubscribe-auth/AANEIAWAAO77SFZXHEGXMN3QGPWS5ANCNFSM4IPQJTBA > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#250?email_source=notifications&email_token=ALAVF44WKRMKB5RRO6XO3NDQGPZT7A5CNFSM4IPQJTBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5EXQRA#issuecomment-524908612>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALAVF452BMSLBKSZTC2QXJDQGPZT7ANCNFSM4IPQJTBA> .

[smholsen]

Thanks!

That probably works, but for IDE support it's not ideal, as my IDE does not recognize the props defined in the @component deocrator in the class.

E.g. See this example;

    @Component({
        name: "Additional",
        props: {
            notes: String,
        }
    })

    export default class Additional extends Vue {
        doSomething() {
            // this.notes is not recognized by the IDE
            this.notes = '';
        }
    }

Is there anyway to work around this? Would it work fine to define the prop in the class like this for example?

    @Component({
        name: "Additional",
        props: {
            notes: String,
        }
    })

    export default class Additional extends Vue {
        notes!: string;
        doSomething() {
            // Now this.notes is recognized by the IDE
            this.notes = '';
        }
}

Is there any problems with this approach? Is any other solution better?

[asbermudez]

I haven't found anything better than that. As you have done, just define your property with the "!" and move it forward. I don't think any IDE get the definition from the Components properties as the types don't use them... What I am doing is putting it like that and add a TODO for when it's fixed...

…

On Mon, Aug 26, 2019, 17:56 Simon Olsen ***@***.***> wrote: Thanks! That probably works, but for IDE support it's not ideal, as my IDE does not recognize the props defined in the @component <https://github.com/component> deocrator in the class. E.g. See this example; @component({ name: "Additional", props: { notes: String, } }) export default class Additional extends Vue { doSomething() { // this.notes is not recognized by the IDE this.notes = ''; } } Is there anyway to work around this? Would it work fine to define the prop in the class like this for example? @component({ name: "Additional", props: { notes: String, } }) export default class Additional extends Vue { notes!: string; doSomething() { // Now this.notes is recognized by the IDE this.notes = ''; } } Is there any problems with this approach? Is any other solution better? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#250?email_source=notifications&email_token=ALAVF4ZRG23SJFODA6MKTU3QGP4JZA5CNFSM4IPQJTBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5EZVDQ#issuecomment-524917390>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALAVF43R5ZHHWIQUQMARK2DQGP4JZANCNFSM4IPQJTBA> .

[kaorun343]

Please check the latest version, v8.2.2 .

[niklaspalm]

Hey, this is how I usually get around this problem:

<template>
...
</template>
<script lang="ts">

    import { Component, Vue } from "vue-property-decorator";

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

    @Component({
        name: "Additional"
    })

    export default class Additional extends AppProps {
        doSomething() {
            this.notes = '';
        }
    }
</script>