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文件中使用:




解决办法就是添加一个 {文件名称}.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目录下的,其他全局变量挂载也可以往上追加。

你可能感兴趣的:(Vue3+TS 解决 app.config.globalProperties 全局变量参数不存在问题)