Vue 3 Typescript 定義 object 的未知數組

Question

我將 vue 3 與 quasar 一起使用，我想為 q-table 制作一個包裝器，但我如何在不使用任何 [] 的情況下定義行。

它是這樣工作的，但是每當我使用這個組件時，我都必須將我的 object 轉換為未知。 有沒有更好的辦法？ 或者我應該關閉“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需要一個對象數組，包含字符串鍵和字符串/數字值。

所以rows應該輸入為：

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

旁注：

• 將undefined指定為默認值實際上與根本不指定默認值相同。 您可以在示例中刪除withDefaults() 。

• 僅返回原始道具的計算道具沒有任何用處。 您可以刪除這些計算道具，直接使用props.rows和props.columns 。