uni-app中使用defineProps时类型一直不匹配，求指点

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app中使用defineProps时类型一直不匹配，求指点
直接上代码如下，这是我封装的一个图片组件，只要传入/static/img/myPic.png这样的图片本地地址，就能方便展示出图片，支持传入ratio比例，能调节图片大小：

<template>  
    <image class="icon" :src="props.src" :style="{width:myRatioSize['width'],height:myRatioSize['height']}" />  
</template>  

<script setup lang="uts">  
import { computed } from 'vue';

const props = defineProps({  
    width: {  
        type: Number,  
        required: true,  
        default: 10  
    },  
    height: {  
        type: Number,  
        required: true,  
        default: 10,  
    },  
    ratio: {  
        type: Number,  
        default: 1  
    },  
    src: {  
        type: String,  
        default: '',  
        required: true  
    }  
})  

const myRatioSize = computed(() => {  
    let _w = props.width;  
    let _h = props.height;  
    const _ratio = props.ratio;  

    return {  
        width: (_w * _ratio) + 'rpx',  
        height: (_h * _ratio) + 'rpx'  
    }  
})  
</script>  

<style>  
</style>

但是编译运行本地基座，编辑器一直报红色字错误：

[plugin:uni:app-uts] 编译失败
10:21:17.704 ‌error: 类型不匹配: 推断类型是Any，但预期的是Number。‌

明明defineProps默认给定了Number类型，但我 let w = props.width， 就一直报错，并且红色下划线指示w处：不能将类型“Record<string, any>”分配给类型“number”。

是否还需要进行类型转换？如何解决这个问题呢？


Harmonyos Next教程
1 回复

在uni-app中使用defineProps时，如果遇到类型不匹配的问题，通常是因为在定义和传递props时没有严格按照TypeScript的类型系统进行规范。以下是一个具体的代码示例，展示如何在uni-app组件中正确使用defineProps以及如何解决类型不匹配的问题。

首先，确保你的项目已经配置了TypeScript支持。然后，我们可以创建一个子组件，并在其中定义props。

子组件 (ChildComponent.vue)

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script lang="ts">
import { defineComponent, defineProps } from 'uni-app';

interface ChildProps {
  message: string;
  count?: number; // 可选属性
}

export default defineComponent({
  props: defineProps<ChildProps>(),
  setup(props) {
    // 这里你可以直接使用props，TypeScript会进行类型检查
    console.log(props.message); // string类型
    console.log(props.count?.toString() || 'No count provided');
    return {};
  }
});
</script>

父组件 (ParentComponent.vue)

在父组件中，我们需要正确传递props给子组件，并确保类型匹配。

<template>
  <view>
    <ChildComponent :message="msg" :count="cnt" />
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'uni-app';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const msg = ref<string>('Hello from Parent');
    const cnt = ref<number>(42);

    return {
      msg,
      cnt
    };
  }
});
</script>

解决类型不匹配问题

如果类型不匹配，通常是因为以下几个原因：

  1. 传递了错误的类型：确保传递给子组件的值类型与defineProps中定义的类型一致。
  2. 未定义可选属性：如果某个属性是可选的，确保在子组件中正确处理了undefined的情况。
  3. TypeScript配置问题：检查tsconfig.json配置，确保TypeScript能够正确解析.vue文件。

通过以上代码示例，你应该能够清晰地看到如何在uni-app中使用defineProps定义和使用props，并且确保类型匹配。如果仍然遇到问题，请检查传递的值是否符合定义的接口类型，以及TypeScript配置是否正确。

回到顶部