Quasar API documentation and typescript.

[bzuidgeest]

I recently started using quasar. I am using a qTable with server side paging. When looking at the API documentation at https://quasar.dev/vue-components/table#qtable-api. I only get that request event has a paramter requestProp of type object.

From googling I discovered that it is actually (for typescript) of type QTableProps. I discovered this from #13960.

How is one to find this out from the official documentation? Is there a place where such things are documented?

[yusufkandemir]

Not yet, but we are planning to reference the available types in the docs, and put TS versions of code examples as well.

[bzuidgeest]

Do you have an intermediate solution other then googling? For all the effort you put into the documentation this feels like a rather large omission.

[yusufkandemir]

I can throw you a quick compilation from our Discord server.

To begin with, you can watch https://youtu.be/CkHM8VLxuus?t=2849

Here are the types generated for each component:

• QTable: instance type, to use with template refs like const tableRef = ref() as Ref<QTableProps>
• QTableProps: props and events types, can be used for typing stuff or with defineProps<...>()
• QTableSlots: slots types, can be used with defineSlots<...>()

You can use the Q...Props types from quasar. Some examples:

• q-table: import { QTableProps } from 'quasar'
• q-select: import { QSelectProps } from 'quasar'

Q...Props type contains both props and events. Props are named as is, events are named as onXyz. Example for QTable:

• pagination prop: const pagination: QTableProps['pagination'] = { ... }
• @request event: const onRequest: QTableProps['onRequest'] = (...) => { ... }

Here is an example of using QTableProps type:

...

<script lang="ts" setup>
import { QTableProps } from 'quasar';
import { reactive } from 'vue';

const pagination: QTableProps['pagination'] = reactive({
  page: 1,
  rowsNumber: 0,
  rowsPerPage: 12,
  sortBy: 'name',
  descending: true,
});

const isLoading = ref(false);

const onRequest: QTableProps['onRequest'] = async ({ filter, pagination }) => {
  // ...
};
</script>

Here is an example pass-through component for QBtn with <script setup>:

<template>
  <q-btn v-bind="props">
    <!-- QBtn has no scoped slots, so no scope passing -->
    <template v-for="(_, slotName) in slots" #[slotName]>
      <slot :name="slotName" />
    </template>
  </q-btn>
</template>

<script setup lang="ts">
import { QBtn, QBtnProps, QBtnSlots } from 'quasar';

// eslint-disable-next-line vue/no-unused-properties -- used in v-bind
const props = withDefaults(defineProps<QBtnProps>(), {
  dense: true,
  outline: true,
});

const slots = defineSlots<QBtnSlots>();
</script>

There are also some manually authored types such as QTableColumn.
Here is an example of typing columns prop of QTable:

<template>
  <q-table :rows="users" :columns="columns" />
</template>

<script lang="ts" setup>
import { QTableColumn } from 'quasar';
import { ref } from 'vue';

interface User {
  id: number;
  name: string;
  address: {
    city: string;
    country: string;
  };
}

// You will get auto-complete on properties like `align`('left', 'right', etc.), `field`('id', 'name' and 'address' because of User), etc.
const columns: QTableColumn<User>[] = [
  { name: 'name', align: 'left', label: 'Name', field: 'name' },
  {
    name: 'city',
    align: 'left',
    label: 'City',
    // row is type of User, we get IntelliSense, etc.
    field: (row) => row.address.city,
  },
];

const users = ref<User[]>([/* ... */]);
</script>

You can discover the manually authored types here: https://github.com/quasarframework/quasar/tree/dev/ui/types/api