我想在 Nuxt v3 中實作一個輪播元件。此組件接收一系列項目。此元件僅實作邏輯，而不實作樣式或結構。
現在這是我的元件：
組件/tdx/carousel.vue
<template>
<div>
<slot name="last"></slot>
<div v-for="item in items">
<slot
name="item"
v-bind="item"
></slot>
</div>
<slot name="next"></slot>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
items: {
type: [],
required: true,
},
spotlight: {
type: Number,
default: 1,
validator(value: number) {
return value > 0;
},
},
});
</script>
這裡輪播的邏輯並不重要。
在父元件中，我可以像這樣使用該元件：
<template>
<div class="container">
<TdxCarousel :items="exampleArray">
<template #item="{ title, description }">
<p class="font-semibold text-2xl">{{ title }}</p>
<hr />
<p>{{ description }}</p>
</template>
</TdxCarousel>
</div>
</template>
<script setup lang="ts">
const exampleArray = ref([
{
title: 'Item 1',
description: 'Desc of item 1',
},
{
title: 'Item 2',
description: 'Desc of item 2',
},
]);
</script>
這很好用。除此之外我想要的是打字。 title 和 description 的型別當然是any，因為在 carousel.vue 的 props 中，項目的型別是 unknown[]。
我發現這篇文章展示瞭如何製作通用元件，但我不想要這個，因為我必須弄亂 nuxt 的自動導入系統。
如何從 carousel.vue 屬性中的給定項目實作類型推斷？
更新：2023 年 5 月
從 Vue 3.3 開始，正式支援通用元件.
您需要定義一個通用參數。修改
carousel.vue元件以使用標記中的generic屬性，並將其轉換為使用基於類型的defineProps的方法，以便它正確地取得泛型。<script setup lang="ts" generic="T extends any"> withDefaults( defineProps<{ items: T[]; spotlight?: number }>(), { spotlight: 1, }); </script> <template> <div> <slot name="last"></slot> <div v-for="item in items"> <slot name="item" v-bind="item"> </slot> </div> <slot name="next"></slot> </div> </template>現在，插槽上的道具將根據物品類型正確推斷。
2023 年 5 月之前
在 VSCode/Volar 的早期版本中，您需要啟用實驗性標誌 。 它需要在
vueCompilerOptions下啟用 tsconfig.json 的experimentalRfc436選項。// tsconfig.json { // ... "vueCompilerOptions": { "experimentalRfc436": true } }這不再是必要的，因為它在最新版本的 Volar 中預設為啟用。