Vue.js vue 3将强类型复杂对象传递给v-for循环内的组件

我试图将一个强类型的复杂对象传递给v-for循环中的组件。我收到以下错误：无效的道具：道具“数据”的类型检查失败。应为StoreListItem，已获取对象

StoreListItem.ts

export class StoreListItem {
    description: String | undefined;
    price: Number | undefined;
}

StoreListItem.vue

<template>
  <p>
    {{Data.description}}
  </p>
  <p>
    {{Data.price}}
  </p>
</template>
<script lang="ts">
import { reactive, defineComponent} from "vue";
import { StoreListItem } from "@/models/StoreListItem";

export default defineComponent({
  name: "StoreListItem",
  props: {
    Data: StoreListItem,
  },
});
</script>

{{Data.description}


{{Data.price}}

从“vue”导入{reactive，defineComponent}；
从“@/models/StoreListItem”导入{StoreListItem}”；
导出默认定义组件({
名称：“StoreListItem”，
道具：{
数据：StoreListItem，
},
});

Home.vue

<template>
      <div v-for="item in featuredItems">
        <store-list-item :Data="item"></store-list-item>
      </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import compStoreListItem from "@/components/StoreListItem.vue";
import { StoreListItem } from "@/models/StoreListItem";

export default defineComponent({
  name: "Home",
  components: { "store-list-item": compStoreListItem },
  setup() {
    let featuredItems = ref<StoreListItem[]>([]);

    function loadData(): void {
      var items: StoreListItem[] = [
        { description: "test", price: 10 },
        { description: "test2", price: 20 },
      ];

      featuredItems.value = items;

    }

    onMounted(() => {
      loadData();
    });

    return { featuredItems };
  },
});
</script>

从“vue”导入{defineComponent，onMounted，ref}；
从“@/components/StoreListItem.vue”导入compStoreListItem；
从“@/models/StoreListItem”导入{StoreListItem}”；
导出默认定义组件({
姓名：“家”，
组件：{“存储列表项”：compStoreListItem}，
设置（）{
设featuredItems=ref（[]）；
函数loadData（）：void{
变量项：StoreListItem[]=[
{说明：“测试”，价格：10}，
{说明：“测试2”，价格：20}，
];
featuredItems.value=项目；
}
未安装（（）=>{
loadData（）；
});
返回{featuredItems}；
},
});

v-for的项目似乎无法保持其类型。它只是一个物体。我想做这样的事情：（行不通）

不确定Vue-3是否能做到这一点，但对于Vue-2，我认为您无法像在组件的prop声明中那样传递特殊类型。您只能指定道具是否为对象和默认值，即默认值。请参阅此处的道具验证部分：它工作正常，但我收到Vue警告消息。不确定Vue-3是否会这样做，但对于Vue-2，我认为您无法像在组件中的道具声明中那样传递特殊类型。您只能指定道具是否为对象和默认值，即默认值。请参阅此处的道具验证部分：它工作正常，但我收到Vue警告消息。

<div v-for="(item as StoreListItem) in featuredItems">
     <store-list-item :Data="item"></store-list-item>
</div>