网站搜索

vuejs2 - 在 Vue 2.7 中使用 Composition API 和 TypeScript 时,无法找到全局实例属性的名称


我正在升级一个使用 TypeScript 和类组件定义风格的旧 Vue 项目。将 Vue 升级到 2.7.13 版本后,我正在尝试将组件迁移到组合式 API 风格,但我遇到了一个具体问题——全局实例属性似乎不再起作用。

例如,我有一个全局实例属性,称为 $capitalize,它被添加到 Vue.prototype 中,并且在使用旧的类风格组件时,应用程序运行良好。我也能够通过模块增强获得完整的类型检查和智能提示:

declare module 'vue/types/vue' {
  interface Vue {
    $capitalize: (string: string) => string,
  }
}

Vue.prototype.$capitalize = capitalize

但是如果我将相同的组件重构为使用组合 API,VSCode 会显示类似这样的错误:

Cannot find name '$capitalize'. ts(2304)

而且该组件也因为缺少那个属性而无法渲染。

我正在使用 VSCode 配合 Volar 和 Volar TypeScript Vue 插件,并根据 Volar 文档禁用了内置的 TypeScript 和 JavaScript 语言功能 扩展。

我知道在 Vue 3 中你应该使用 app.config.globalProperties,但这显然没有回移植到 Vue 2.7。

我尝试在 types/sfc.d.ts 中使用这个 shim:

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

我也尝试过修改 tsconfig.json,添加和删除这些内容:

compilerOptions.jsx = "preserve"
compilerOptions.typeRoots
include
files

我尝试使用组合式 API 的不同方式——有和没有 defineComponent,有和没有 <script setup>。

我在这条评论中看到,我实际上可以在 onMounted 中访问根实例,所以在那个上下文中 this.$capitalize 是可行的,但如果我想在 onMounted 之外使用它呢?在 Vue 2 中,在所有组件的 setup 函数中以“正确”的方式全局提供某些东西的方法是什么?