uniapp项目vue3 ts编译时报错,绑定元素“item”隐式具有“any”类型，如何解决？

Question

编译时报错不明白问题出在哪里
绑定元素“item”隐式具有“any”类型

<template>
    <view class="content">
        <swiper
            v-if="swiperList"
            :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            :circular="true">
            <swiper-item
                v-for="item in swiperList"
                :key="item.goods_id">
                <image
                    mode="aspectFill"
                    :src="{{item.image_src}}"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const swiperList = ref([{ image_src: "", goods_id: "1" }]);
onLoad(async () => {
    const res = await uni.request({ url: "https://www.uinav.com/api/public/v1/home/swiperdata" });
    swiperList.value = res.data.message;
    console.log(swiperList.value);
});
</script>

<style>
</style>

源码地址
https://gitee.com/sachin-ye/uni-app-ts

Answer 1

• 这个错误是因为 TypeScript 在编译时无法确定 item 的类型。在这种情况下，可以使用 TypeScript 的类型推断功能来确定 item 的类型。

• 可以在 script 标签上定义一个 interface 来描述 item 的结构，然后在 v-for 循环中使用该 interface 类型，并将 item 的类型设置为这个 interface，如下：

interface Item {
    image_src: string;
    goods_id: string;
}

const swiperList = ref<Item[]>([]);
onLoad(async () => {
    const res = await uni.request({ url: "https://www.uinav.com/api/public/v1/home/swiperdata" });
    swiperList.value = res.data.message;
    console.log(swiperList.value);
});

另外，在template中，src应该使用:src="item.image_src"而不是:src="{{item.image_src}}",因为第二种方式是vue1.0的写法。

这样就能解决编译时报错问题。