Typing for QTable @request

[alitalaghat]

I tried to implement "Server side pagination, filter and sorting" sample in Typescript.
https://quasar.dev/vue-components/table#server-side-pagination-filter-and-sorting

I used QTableProps['onRequest'] for props typing but it doesn't work:

    function onRequest (props: QTableProps['onRequest']) {
      console.log(props);
    }

This is the error that TS reported:

Type '(props: ((requestProp: { pagination: { sortBy: string; descending: boolean; page: number; rowsPerPage: number; }; filter: (rows: readonly any[], terms: any, cols?: readonly any[] | undefined, getCellValue?: ((col: any, row: any) => any) | undefined) => readonly any[]; getCellValue: (col: any, row: any) => any; }) =>...' is not assignable to type '(requestProp: { pagination: { sortBy: string; descending: boolean; page: number; rowsPerPage: number; }; filter: (rows: readonly any[], terms: any, cols?: readonly any[] | undefined, getCellValue?: ((col: any, row: any) => any) | undefined) => readonly any[]; getCellValue: (col: any, row: any) => any; }) => void'.
  Types of parameters 'props' and 'requestProp' are incompatible.

[yusufkandemir]

QTableProps['onRequest'] type is for the function itself, not just for its parameter. The correct way is to do this:

import type { QTableProps } from 'quasar';

const onRequest: QTableProps['onRequest'] = ({ pagination, filter, getCellValue }) => {
  // ...
}

[alitalaghat]

In your solution, this is not accessible, so I can not access component data. How can I define your typed function inside the methods property of the component?

[yusufkandemir]

It's not accessible because it's an arrow function. Btw, using TypeScript and Options API is not the wisest choice I must say. But, since it's an event listener and the important part is the parameter, you can extract the parameter type and use it.

methods: {
  onRequest (props: Parameters<QTableProps['onRequest']>[0]) {
    console.log(props);
  }
  // ...
}

[alitalaghat]

Thanks, this is almost what I need. I just added NonNullable to your solution.

methods: {
  onRequest (props: Parameters<NonNullable<QTableProps['onRequest']>>[0]) {
    console.log(props);
  }
  // ...
}

Without the above modification, we get the following error:

Type '((requestProp: { pagination: { sortBy: string; descending: boolean; page: number; rowsPerPage: number; }; filter: (rows: readonly any[], terms: any, cols?: readonly any[] | undefined, getCellValue?: ((col: any, row: any) => any) | undefined) => readonly any[]; getCellValue: (col: any, row: any) => any; }) => void) |...' does not satisfy the constraint '(...args: any) => any'.
  Type 'undefined' is not assignable to type '(...args: any) => any'.

[Divensky]

This helped me too, even though what I was really looking for was the use cases/examples for getCellValue prop.

I ended up asking a Q of my own about this.