Skip to content

Vue 3 Typescript define unknown array of object

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[]?


<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)




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.