Missing TypeScript types?

[francoism90]

Is your feature request related to a problem? Please describe.

// https://next.quasar.dev/vue-components/infinite-scroll#usage
onLoad (index, done) {
  ..
}

https://next.quasar.dev/vue-components/select#filtering-and-autocomplete
filterFn (val, update) {
 ..
}

Describe the solution you'd like

// https://next.quasar.dev/vue-components/infinite-scroll#usage
onLoad (index : number, done: SomeInterface) {
  ..
}

// https://next.quasar.dev/vue-components/select#filtering-and-autocomplete
filterFn (val: string, update: SomeInterface, abort: SomeInterface) {
  ..
}

Don't think these are good examples either, I found out the QSelect interface seems to offer some typing, but abort() wasn't included?

Describe alternatives you've considered

// eslint-disable-next-line @typescript-eslint/ban-types
filterFn (val: string, update: Function, abort: Function) {
  ..
}

Additional context I'm kinda new to Typescript, sorry if this should be fixed in a different way. :)

Many thanks!

[stefanvanherwijnen]

At this point Quasar is still written in plain JS and this means any component types would have to be defined manually.

Since everything is extensively documented you can add the types to the functions (filter, onload) yourself when you use typescript. You could also type everything as unknown and as long as you follow the docs you should have no problem.

As for altering the docs :as long as there is no type definition for the entire function it would just be redundant to manually add the types on top of the already existing function documentation.

filterFn (val: unknown , update: unknown , abort: unknown ) {
  ..
}

should get you going if you don't want to specify the types yourself.

Ideally it would become something like

import { FilterFn } from 'quasar'
function filter (...) : FilterFn

[douglasg14b]

Nevermind, found types under dist/types

@stefanvanherwijnen Is there any problems with adding type definitions to the project on a piecemeal basis?

For instance, (this.$refs.form as any).validate() is a common call in components that use forms, however, by default this is an unsafe any. It would be great if it could be typed such as (this.$refs.form as QForm).validate().

I can make the definitions myself, but I'd like to contribute it back to the project.

The type definition for https://github.com/quasarframework/quasar/blob/dev/ui/src/components/form/QForm.js is pretty trivial, however, how would I go about contributing in this manner?

Example:

    export interface QForm {
        /** Focus on first focusable element/component in the form */
        focus(): void;

        /** Triggers a validation on all applicable inner Quasar components */
        validate(): boolean;

        /** Resets the validation on all applicable inner Quasar components */
        resetValidation(): void;

        /** Manually trigger form validation and submit */
        submit(event?: Event): void;

        /** Manually trigger form reset */
        reset(event?: Event): void;

        /** Get array of children vue components that support validation */
        getValidationComponents(): any[];
    }

[stefanvanherwijnen]

I'm not sure what the stance is on adding the TS types. I think this is up to @IlCallo.

The types are defined here : https://github.com/quasarframework/quasar/tree/dev/ui/types

[IlCallo]

We plan to setup a system to make it easier for the community to contribute with types when missing, but it will probably be in June, after testing AE support for Qv2/Vue3

Closing has the seached types has been found

[GoodLuc]

I couldn't find the type for the 'update' function parameter on quasar's filterFn anywhere else, but in case someone else is looking to type this, it can be done like this:

const filterFn = (val: string, update: (fn: () => void) => void) => { update((): void => { const needle = val.toLowerCase(); timezoneOptions.value = timezones.filter( (v) => v.toLowerCase().indexOf(needle) > -1 ); }); };