Vue 3 Typescript define unknown array of 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>

If you don't care about the type of rows just use any[]. It's fine. If you want the IDE checks the type of rows then define an explicit type for it — Duannx
– Duannx, Commented Apr 28, 2022 at 2:09

tony19 · Accepted Answer · 2022-04-28 21:09:32Z

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.

edited Apr 28, 2022 at 21:09

answered Apr 28, 2022 at 4:49

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 Typescript define unknown array of object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related