类型“Uni”上不存在属性“xxx”

在 UniApp 中，如果将一个自定义属性挂载到 uni 对象上，可能会遇到 TypeScript 类型检查的问题，因为默认的 Uni 类型并不包含新增的属性（如 $x）。为了解决这个问题，需要扩展 Uni 的类型定义。

扩展 Uni 类型

创建一个声明文件来扩展 Uni 的类型。通常这个文件可以放在 src 目录下的 types 文件夹中，例如 src/types/uni-app.d.ts

// src/types/uni-app.d.ts
interface Uni {
    $x: {
      log: (message: string) => void;
    };
}

在这个声明文件中，通过模块扩展的方式向 Uni 接口添加了 $x 属性。可以根据需要定义 $x 的具体结构。

 在入口文件中挂载 $x 到 uni 对象

接下来，在项目的入口文件（通常是 main.ts）中导入并挂载 $x 对象。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 挂载自定义属性 $x 到 uni 对象
if (uni != undefined) {
  uni.$x = {
    log: (message:string) => {
      console.log(`[自定义日志] ${message}`);
    }
  };
}

app.mount('#app');

在组件或其他地方使用 uni.$x

现在在任何地方通过 uni.$x 来访问和使用自定义对象，并且 TypeScript 不会再报错。

示例：在 Vue 组件中使用

<template>
  <div>
    <button @click="logMessage">点击打印日志</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

// 使用 uni.$x 的方法
const logMessage = () => {
  uni.$x.log('这是一条来自组件的日志消息');
};

// 访问全局属性
const e = uni.$x;

onMounted(() => {
  // 可以在生命周期钩子或其它地方使用 uni.$x
  e.log('组件已挂载');
});
</script>

<style scoped>
/* 样式 */
</style>

解释

• 类型声明文件：通过 declare module 扩展 Uni 接口，添加新的属性 $x。
• 入口文件：在 main.js 或 main.ts 中将 $x 挂载到 uni 对象上。
• Vue 组件：在组件中通过 uni.$x 访问自定义的全局属性和方法。

这样，就可以在 TypeScript 项目中顺利地使用自定义的 uni.$x 属性，而不会遇到类型错误。