Vue3+TypeScript全局对象注入与类型定义实战指南

作者：纸飞机时间：2026-10-25 21:07:28浏览：88

本文详解Vue3结合TypeScript环境下全局对象的注入与使用。对比Vue2的prototype方式，介绍如何在Vue3中通过封装useCurrentInstance获取全局属性，并结合TypeScript接口定义实现强类型约束。通过示例展示如何在main.ts中统一挂载辅助类，并在组件中安全调用全局方法，提升代码可维护性与开发体验。

在完成部分前端项目开发后，笔者着手总结相关技术点，并继续完善基于SqlSugar开发框架的系列文章。本篇主要探讨在Vue3与TypeScript环境下，如何实现全局对象的注入与使用。在Vue2中，通过prototype即可便捷地注入全局变量；而在Vue3中，虽然该方式不再直接适用且显得稍显复杂，但考虑到全局变量挂载带来的便利性，我们仍需在Vue3+TypeScript中沿用这一模式来处理常规辅助类方法。

1、Vue2的全局挂载

由于Vue2的全局挂载方式极为便利，因此在实际开发中被广泛使用。只需通过Vue.prototype.**即可将变量注入全局，随后在页面或组件中通过this.**即可直接访问，操作十分简便，具体实现如下所示。

Vue.prototype.getToken = getToken
    Vue.prototype.guid = guid
    Vue.prototype.isEmpty = isEmpty

若需注入函数定义，其处理方式与上述类似。

// 提示成功信息
    Vue.prototype.msgSuccess = function(msg) {
      this.$message({ showClose: true, message: msg, type: 'success' })
    }
    // 提示警告信息
    Vue.prototype.msgWarning = function(msg) {
      this.$message({ showClose: true, message: msg, type: 'warning' })
    }
    // 提示错误信息
    Vue.prototype.msgError = function(msg) {
      this.$message({ showClose: true, message: msg, type: 'error' })
    }

有时为了提升便利性，会将常规函数封装在一个函数中进行统一注册与挂载处理。具体代码示例如下。

1、Vue2的全局挂载

如此，在main.js文件中，即可直接导入该模块并执行注册挂载操作。

// 导入一些全局函数
import prototype from './prototype'
Vue.use(prototype)

完成上述常规函数的挂载处理后，在组件或页面中，即可通过this引用直接获取并使用这些全局函数。

1、Vue2的全局挂载

2、Vue3+TypeScript的全局挂载

与Vue2不同，由于语法结构的变更，Vue3无法再通过上述方式处理全局挂载，甚至在页面或组件中也无法直接访问this指针引用。

然而，鉴于全局变量挂载仍具有其独特的优势，我们在Vue3+TypeScript项目中依然采用这种模式来处理常规的辅助类方法。

网络上关于Vue3+TypeScript挂载方式的介绍较多，以下是一种典型的处理方式：创建一个独立的ts文件useCurrentInstance.ts，具体代码示例如下。

import { ComponentInternalInstance, getCurrentInstance } from 'vue'

//获取默认的全局自定义属性
export default function useCurrentInstance() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const proxy = appContext.config.globalProperties
  return {
    proxy
  }
}

随后在页面代码中import该文件并实例化使用即可，具体代码示例如下。

<script setup lang="ts">
import useCurrentInstance from '/@/utils/useCurrentInstance' //使用常规方式获取对象
const { proxy } = useCurrentInstance();
let $u = proxy.$u as $u_interface;

//挂载的时候初始化数据
onMounted(async () => {
  console.log($u.success('abcdefa'));
  console.log($u.util.guid());
});

为了简化使用流程，笔者对上述代码进行了加工处理，旨在使调用过程尽可能简洁。

在原有的独立ts文件useCurrentInstance.ts基础上，设置如下代码。

import { ComponentInternalInstance, getCurrentInstance } from 'vue'

//直接获得注入的对应的$u实例
export function $user() {
  const { appContext } = getCurrentInstance() as ComponentInternalInstance
  const proxy = appContext.config.globalProperties;
  const $u = proxy.$u as $u_interface;
  return $u;
}

此时，该文件返回的$user函数即为我们挂载的用户自定义对象，可统一进行调用。

import { $user } from '/@/utils/useCurrentInstance' //使用简便模式获取注入全局变量$u
let $u = $user();//实例化

仅需两行代码，即可直接获取当前app的全局对象引用。

由于我们封装了一系列常规方法和对象，在Vue3的setup代码中，可直接使用全局对象的$u，具体代码如下所示。

// 显示编辑对话框
function showEdit(id) {
  if ($u.test.isEmpty(id)) {
    $u.warn("请选择编辑的记录!");
    return;
  }
  emit('showEdit', id)
}

至于全局对象中如何挂载其他快捷对象，则需根据实际业务需求而定。

3、Vue3+TypeScript的全局挂载的对象接口定义

前文简要介绍了全局对象的挂载与使用过程及相关实例代码。但对于刚接触Vue3+TypeScript的开发者而言，可能尚不清楚TypeScript中强类型约束的具体应用，而强类型约束能带来诸多语义提示方面的益处。

我们知道，基于TypeScript的项目中均存在一个配置文件tsconfig.json，用于设定TypeScript的目录及相关配置。当VSCode加载项目时，会将项目相关的类型定义加载进来，其配置位于Include配置项中。

1、Vue2的全局挂载

部分项目全局通用的定义通常放置在types/*.d.ts文件中。查看types目录，可以看到诸多全局定义信息，具体如下图所示。

1、Vue2的全局挂载

在此处，我们增加一个独立文件，用于设置定义挂载对象的接口类型信息。

另外，我们计划将全局辅助类对象的信息存放于util目录中，具体结构如下所示。

1、Vue2的全局挂载

编写相关代码，并提供一个install的组件安装方法，供在main.ts中调用处理。

1、Vue2的全局挂载

在main.ts中，使用use的方式即可实现挂载处理。

 app.use($u);//挂载自定义的一些变量辅助类

对应的辅助类接口定义，统一放置在全局Types目录下的一个单独文件$u.d.ts中进行定义。

1、Vue2的全局挂载

例如，我们定义常规弹出消息的函数接口如下所示。

//定义自定义类$u的接口类型
interface message_interface {
  Message(message: string): any;
  success(message: string): any;
  warn(message: string): any;
  error(message: string): any;
  confirm(message = '您确认删除选定的记录吗?'): Promise<any>;
};

其他各类接口定义，则可通过组合处理来实现。

1、Vue2的全局挂载