uni-app 使用 typescript 编译时会导致uview组件有warning，纯js没任何问题

uni-app 使用 typescript 编译时会导致uview组件有warning，纯js没任何问题

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 21H1
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 oneplus
页面类型 vue
打包方式 云端
项目创建方式 CLI
CLI版本号 2.0.0-32220210818002

示例代码：

import { Vue, Component } from 'vue-property-decorator';

@Component({
components: {},
})
export default class UnusualReport extends Vue {
public form = {
name: '',
intro: '',
};
}

// export default {
//   data: function() {
//     return {
//       form: {
//         name: '',
//         intro: '',
//       },
//     };
//   },
// };

操作步骤：

uview 绑定数据都会有这个警告问题

预期结果：

无警告

实际结果：

property received type-uncompatible value: expected <Object> but got non-object value. Used null instead.

bug描述：

UI 用的 uview 用“vue-property-decorator” typescript 写法编译到小程序会有警告 （如图） 但是用 js 写法就不会有警告出现。 应该是用 typescript 的时候 最终编译文件不一样。


更多关于uni-app 使用 typescript 编译时会导致uview组件有warning，纯js没任何问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

vue2 和 vue3 对 props 的校验严格程度可能不同
写法的问题，期望一个 object 的值，但是得到一个不是 object 的值
对比一下两个编译前后有什么区别

更多关于uni-app 使用 typescript 编译时会导致uview组件有warning，纯js没任何问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有用 vue3

这是 TypeScript 与 uView 组件在 uni-app 中的类型兼容性问题。警告信息表明 uView 组件期望接收一个对象类型的 prop，但 TypeScript 编译后可能传递了 undefined 或 null 值。

主要原因是 TypeScript 的严格类型检查与 Vue 类组件的初始化时机问题。在 vue-property-decorator 的类写法中，form 属性在组件实例化时的初始值可能被 TypeScript 处理为 undefined，导致 uView 组件接收到非对象值。

解决方案：

  1. 使用明确的初始值：
public form: Record<string, any> = {
  name: '',
  intro: '',
};
  1. 使用非空断言（如果确定值不会为 null/undefined）：
public form!: {
  name: string;
  intro: string;
};
  1. 在 mounted 钩子中确保值存在：
mounted() {
  if (!this.form) {
    this.form = { name: '', intro: '' };
  }
}
回到顶部