Vue3 getCurrentInstance与ts结合使用的问题

最新推荐文章于 2025-08-20 16:56:58 发布

原创最新推荐文章于 2025-08-20 16:56:58 发布 · 5.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #react #javascript #java

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

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>