Vue 3 Typescript 定义 object 的未知数组

Question

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>

Answer 1

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.