Home > Software engineering >  Vue 3 Typescript define unknown array of object
Vue 3 Typescript define unknown array of object

Time:04-28

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>

CodePudding user response:

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>[];            
  • Related