Typings for Nuxt callbacks don't apply for Component Classes

[jmannau]

Describe the bug
I have set up a new Nuxt 2.9 app using nuxt/typescript 0.1.10. I have tried to use the @component decorator for .vue Pages. The typings for asyncData and other Nuxt properties aren't being picked up. I have replicated this using the minimal Component Class sandbox.

To Reproduce
Steps to reproduce the behavior:

1. Open this sandbox https://codesandbox.io/embed/example-class-api-minimal-djmd2
2. Run the project
3. In the terminal, you can see that Typescript complains that the ctx parameter of asyncData has an implicit any type

    ERROR  ERROR in /sandbox/pages/index.vue(12,13):     nuxt:typescript 00:59:12
    12:13 Parameter 'ctx' implicitly has an 'any' type.
       10 |   message: string = "This is a message";
       11 |
     > 12 |   asyncData(ctx) {
          |             ^
       13 |     console.log({ ctx });
       14 |   }
       15 | }
   

Expected behavior
From my understanding of the project, https://github.com/nuxt/typescript/blob/master/packages/types/app/vue.d.ts#L12 asyncData should be available as either a component option used in the @Component decorator or in the component class

[edimitchel]

I'm facing the same issue here, and I'm trying to fix this by adding nuxt-property-decorator (repo). By this way, typing is provided.

Take a look here : nuxt/nuxt#5330 and here https://codesandbox.io/s/6l91r3qn5z

[jmannau]

I’ve tried using nuxt-property-decorator but it didn’t make a difference for me as I believe the problem is the typings from @nuxt/types aren’t being included for some reason.

…

On 23 Aug 2019, at 7:08 pm, Michel EDIGHOFFER ***@***.***> wrote: I'm facing the same issue here, and I'm trying to fix this by adding nuxt-property-decorator (repo). By this way, typing is provided. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kevinmarrec]

Sorry but this isn't and won't be supported around here.

Usage of Nuxt functions inside class are only supported with nuxt-property-decorator, cause it registers hooks that make functions available.
See https://github.com/nuxt-community/nuxt-property-decorator/blob/master/lib/nuxt-property-decorator.umd.js#L10

That's why I'm not a fan of it and I would recommend using vue-property-decorator and use asyncData in component options to have proper type checking.

You can try open an issue around nuxt-property-decorator to see how types could be provided, it's around extending Vue TypeScript interface from vue-class-component.

Also see further notes around #58

[jmannau]

Thanks for the comment. Can you provide any pointers on the recommended way of using Nuxt hooks? I must misunderstand the toes as I thought @nuxt/types extended ‘Vue’ and hence made ‘asyncData’ available in a class that implements ‘Vue’

…

On 23 Aug 2019, at 7:31 pm, Kevin Marrec ***@***.***> wrote: Sorry but this isn't and won't be supported around here. Usage of Nuxt functions inside class are only supported with nuxt-property-decorator, cause they are registering hooks that make functions available. See https://github.com/nuxt-community/nuxt-property-decorator/blob/master/lib/nuxt-property-decorator.umd.js#L10 That's why I'm not a fan of it and I would recommend using vue-property-decorator and use asyncData in component options to have proper type checking. You can try open an issue around nuxt-property-decorator. Also see further notes around #58 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kevinmarrec]

@jmannau Vue from vue-class-component isn't same interface than Vue from vue, so that's why.
If something need to be done, it's around decorator libraries.