uni-app vue3 ts 挂载全局方法在proxy中ts无法识别挂载的方法并且爆红

uni-app vue3 ts 挂载全局方法在proxy中ts无法识别挂载的方法并且爆红

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 10
HBuilderX类型 正式
HBuilderX版本 4.65
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • mi15

操作步骤：

.

预期结果：

.

实际结果：

.

bug描述：

vue3 + ts

main.js中挂载全局方法

使用时在proxy中ts无法识别挂载的方法并且爆红

//main.js  
...  
import {Sugar} from '@/common/sugar.ts';  
...  
export function createApp() {  
    const app = createSSRApp(App)  
    // 全局挂载  
    app.config.globalProperties.$Sugar = Sugar  
    install(app)  
    return {  
        app,  
    }  
}

//pages/index.vue  

<script setup lang="ts">  
import { ref, Ref, computed, getCurrentInstance } from 'vue';  
const { proxy } = getCurrentInstance();  
proxy.$Sugar.xxx()  
</script>

此时 $Sugar 没有代码提示，并且会爆红

但是

当你声明了类型文件时，比如

//shims-vue.d.ts  

import { ComponentCustomProperties } from '@vue/runtime-core';  
declare module 'vue' {  
    interface ComponentCustomProperties {  
        $Sugar: {  
            xxx: (text: string) => void;      
        };  
    }  
}  
export default ComponentCustomProperties;

当编译器打开这个文件时候，有代码提示不报错， 关闭这个文件就没有提示并且报错


更多关于uni-app vue3 ts 挂载全局方法在proxy中ts无法识别挂载的方法并且爆红的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

根据文档重新改了。 下面这个Myglobal 是全局声明 $Sugar 还是无法访问
@DCloud_UNI_JBB
import { ComponentCustomProperties } from ‘vue’;

declare global {
type Myglobal = string;
}

declare module ‘vue’ {
interface ComponentCustomProperties {
$Sugar: {
xxx: (text: string) => void;

};

}
}

export {};

更多关于uni-app vue3 ts 挂载全局方法在proxy中ts无法识别挂载的方法并且爆红的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经反馈给hx的同事了

vue3官方文档中有写，全局属性或者方法要在 类型文件 中声明，参考文档链接 https://cn.vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

文件声明了，但只有编译器打开这个文件时候，才有代码提示不报错，

回复 希灵帝国审查官: 发个复现demo

回复 DCloud_UNI_JBB: 发了

@DCloud_UNI_JBB

当前项目，4.65直接标准基座运行到红米手机 没有问题哦，loading出来了

你是加了语法提示吗，我没有语法提示

回复 恭喜n发财: 代码没问题，语法提示没有 和ts爆红 我这按照文档加了 ComponentCustomProperties 类型的补充 给proxy，但是不好使，正常的全局类型可以识别，扩展全局属性就不行 。 F:/code/RuoYi-App-vue3/model/shims-vue.d.ts

参考文档链接 https://cn.vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

globalProperties上挂载数据仅支持了这种写法(this.)的提示，用户的这种写法没有主动支持提示，至于说的写了声明并打开是因为打开的项目下的文件会被加载到语言服务的上下文中，关闭后就被清理了

setup写法的用户呢（现在新的vue3项目都是setup写法）

<script setup lang="ts"> import { onLoad,} from '[@dcloudio](/user/dcloudio)/uni-app' import { getCurrentInstance} from "vue"

const { proxy } = getCurrentInstance()

onLoad((options) => { proxy.$Sugar }） </script>

在uni-app Vue3 + TS项目中，全局方法类型声明的问题可以通过以下方式解决：

  1. 确保类型声明文件被正确识别。将shims-vue.d.ts文件放在src目录下，内容修改为：
import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $Sugar: {
      xxx: (text: string) => void
    }
  }
}
  1. 使用时可以通过类型断言解决报错问题：
const { proxy } = getCurrentInstance() as ComponentInternalInstance
;(proxy as any).$Sugar.xxx()
  1. 或者使用更优雅的解决方案，在setup中直接引入Sugar：
import { Sugar } from '@/common/sugar.ts'
Sugar.xxx()
  1. 确保tsconfig.json中包含类型声明文件：
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}
回到顶部