煮茶忘放糖的博客

简简单单写点文章

Vue3+TS 解决 app.config.globalProperties 全局变量参数不存在问题

假设我们在src目录下有一个 utils文件夹,里面有个index.ts文件,定义了自己的一些工具方法,比如:

const printInfo = (msg: string) => {
console.log(msg);
}

export default {
printInfo
}

如果想在全局使用,首先肯定是在main.ts中添加:

import utils from './utils'
...
// 全局属性配置
app.config.globalProperties.$utils = utils
...

然后在某个vue文件中使用:

<script setup lang="ts">

import { getCurrentInstance } from 'vue'

// 获取Component实例
const proxy = getCurrentInstance()?.proxy
proxy?.$utils.printInfo("这是一条消息")
// 然后这里就提示错误了:TS2339: Property '$utils' does not exist on type 'ComponentPublicInstance{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase >'.

</script>

<template>
<h1>这是一条消息</h1>
</template>

解决办法就是添加一个 {文件名称}.d.ts声明文件,添加全局挂载属性:

import { ComponentCustomProperties } from "@vue/runtime-core";

declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$utils: object; // 这里填类型
}
}
// 必须导出,才能在其他文件中使用
export default ComponentCustomProperties;

备注:文件名称随意,可以放在src的任意目录下,ts文件已经自动导入了,但因为要编译打包,最好不要和同级目录中已存在的文件名称相同,像我就是改成:extend.d.ts,放在src目录下的,其他全局变量挂载也可以往上追加。