在Vue 3中-从modelValue中将类型推断为slotProp

cgvd09ve  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(125)

我已经简化了我试图创建的组件:

// MyComp.vue

<script setup lang="ts">
import { PropType, defineProps, defineEmits } from 'vue';

const props = defineProps({
    modelValue: {
        type: Array as PropType<unknown[]>,
        required: true,
    },
});

const emit = defineEmits({
    updateModelValue: (value: unknown[]) => true,
});
</script>

<template>
    <div v-for="(item, index) in modelValue" :key="index">
        <slot :item="item" :index="index"></slot>
    </div>
</template>
// Parent.vue

<script setup lang="ts">
import { ref } from 'vue'
import { MyComp } from '.';

const myArray = ref([
    {
        name: 'A',
        id: 1,
    },
    {
        name: 'B',
        id: 2,
    },
]);

</script>

<template>
    <div>
        <MyComp v-model="myArray">
            <template #default="{ item }">
                <!-- item is of type unknown - type not inferred :( -->
                <div>{{ item }} </div>
            </template>
        </MyComp >
    </div>
</template>

我的问题是item的类型不能被推断出来,所以我不能得到我想要的智能感知。
我如何才能做到这一点?
(StackOverflow不让我在没有更多细节的情况下发布这个问题,所以我添加了这句话)

rt4zxlrg

rt4zxlrg1#

看起来你已经将数组项类型设置为unknown。我不认为在这一点上还有什么可供TS推断的。
如果你使用的是Vue 3.3或更高版本,你可以使用通用组件:

// MyComp.vue

<script setup lang="ts" generic="T">
import { PropType } from 'vue';

const props = defineProps({
    modelValue: {
        type: Array as PropType<T[]>,
        required: true,
    },
});

const emit = defineEmits({
    updateModelValue: (value: T[]) => true,
});
</script>

这将正确地推断类型,请参见playground

相关问题