Vue3 getCurrentInstance与ts结合使用的问题

最新推荐文章于 2025-05-27 17:22:44 发布

yixiancheng

最新推荐文章于 2025-05-27 17:22:44 发布

阅读量5.8k

点赞数 12

CC 4.0 BY-SA版权

文章标签： vue js react javascript java

本文链接：https://blog.youkuaiyun.com/yixiancheng/article/details/118749519

该博客介绍了在Vue3项目中，如何处理ts类型报错问题，特别是在使用getCurrentInstance()时。作者提供了一个解决方案，即创建一个名为useCurrentInstance.ts的文件，将getCurrentInstance()的调用进行封装，并通过appContext.config.globalProperties获取proxy。在组件内部，可以通过导入这个封装好的方法来避免ts类型的错误。这种方法使得在组件中使用getCurrentInstance()更加便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3项目中，如果不用ts这样使用是没问题的

const { proxy } = getCurrentInstance()

在ts中使用会报错：报错：...类型“ComponentInternalInstance | null”

我们在项目中一般会用到很多getCurrentInstance()方法，直接封装一下

创建useCurrentInstance.ts文件：

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const proxy = appContext.config.globalProperties
    return {
        proxy
    }
}

组件内使用：

<script lang="ts">
import { defineComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
export default defineComponent({
  setup() {
    const { proxy } = useCurrentInstance();
    console.log(proxy);
  },
});
</script>