Vuetify: [Feature Request] TypeScript definitions for component methods

[mzhukovs]

Let's say I have a v-form in my template;
<v-form ref="form" v-model="valid" lazy-validation>

If I want to use the functions like validate() and reset() on that form, I need a way to cast the ref to form.

I have added "vuetify" to the types array in my tsconfig, and am able to successfully import { VForm } from 'vuetify/lib', but when I try this, I get an error:

What is the proper way to achieve this? Please let me know, thanks.

[amritk]

That VForm you are importing is not a type, it is the form component.

I'm not sure if this is correct, but this is what I have been doing:

(this.$refs.form as HTMLFormElement).reset()

[mzhukovs]

hey @amritk , appreciate the response. That happens to work for reset since HTMLFormElement and VForm share that definition but validate() for example is not.

[albernhagen]

I'd also like to see this implemented.

[mikestu]

We use TypeScript for our enterprise application, and would also benefit from fully fleshed out TypeScript definitions for the Vuetify components. It appears to have been started, but all the individual components are just type "Component", which doesn't help with intellisense. Since the next version of Vue will be built with TypeScript (although you can still use the transpiled javascript version as well), more people will likely start asking for this at some point. It's not a deal-breaker for TypeScript users, but would be a nice-to-have.

https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/types

[rene-dohan]

How can I create my own definition or start external library for that if this is not to important for vuetify developers ? Or maybe I can fork vuetify and add there definitions based on documentation ? Any examples how to do that ? Or is there some other good UI library for vue with full type definitions ? I am not sure but it definitelly slows me down , now I am looking to javascript sources but its hardly readable for me. An I really hate reading of documentation for just typing code. It's like stone age.

[CatsMiaow]

[nekosaur]

InstanceType<typeof VForm>

[CatsMiaow]

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/types/lib.d.ts#L15-L170

[mzhukovs]

hi @KaelWD , just wondering if there are any official plans to implement this any time soon? Please let us know when you get a chance, thanks!

[johnleider]

It's in our eyes for v3.

[Shinigami92]

If the roadmap is correct, this will be more than a year away 😨

Are you interested in PRs? Or is something else in the way and blocking it?

[moshe5745]

+1 yes please

[josefsabl]

So far I added this to my vue.d.ts:

interface VForm extends HTMLFormElement {
    validate(): boolean;
}