I'm using vue 3 with quasar and I would to make a wrapper for q-table but how can I define rows without using any[].
It works like this but then whenever I use this component I'll have to convert my object to unknown. Is there any better way? Or I should just turn off "no-explicit-any" and use any[]?
<template>
<div>
<q-table
:rows="rows"
:columns="columns"
/>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { QTableProps } from 'node_modules/quasar/dist/types/index';
interface Props {
columns?: QTableProps['columns'];
rows?: unknown[];
}
const props = withDefaults(defineProps<Props>(), {
rows: undefined
});
const rows = computed(() => props.rows)
const columns = computed(() => props.columns)
</script>
QTable.rows expects an array of objects, containing string keys and string/number values.
So rows should be typed as:
interface Props {
columns?: QTableProps['columns'];
rows?: Record<string, string | number>[]; 👈
}
Side notes:
Specifying undefined as a default value is effectively the same as not specifying a default at all. You can remove the withDefaults() in your example.
The computed props that just return the original props have no useful effect. You could remove these computed props, and just use props.rows and props.columns directly.