Vue 3 Typescript 定义未知的对象数组

Question

我将 vue 3 与 quasar 一起使用，我想为 q-table 制作一个包装器，但是如何在不使用任何 [].

的情况下定义行

它是这样工作的，但是每当我使用这个组件时，我都必须将我的对象转换为未知。有没有更好的办法？或者我应该关闭“no-explicit-any”并使用 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 需要一个对象数组，包含字符串键和 string/number 值。

所以 rows 应该输入为：

interface Props {
  columns?: QTableProps['columns'];
  rows?: Record<string, string | number>[]; 
}

旁注：

将 undefined 指定为默认值实际上与根本不指定默认值相同。您可以删除示例中的 withDefaults()。
只是return原始道具没有任何作用的计算道具。您可以删除这些计算道具，直接使用 props.rows 和 props.columns。

Vue 3 Typescript 定义未知的对象数组

Vue 3 Typescript define unknown array of object

javascript

typescript

vuejs3

quasar-framework