在 Vue 2.7 中使用带有 TypeScript 的 Composition API 时全局实例属性的“找不到名称”

Question

我正在升级一个旧的 Vue 项目，该项目使用 TypeScript 和 class 组件定义 样式。将 Vue 升级到 2.7.13 版本后，我正在尝试将组件迁移到 Composition API 样式，但我遇到了一个特定问题 - 全局实例属性似乎不再起作用。

例如，我有一个名为

$capitalize

的全局实例属性添加到

Vue.prototype

并使用旧类样式的组件应用程序工作正常。我还能够使用模块扩充获得完整的类型检查和 Intellisense：

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

Vue.prototype.$capitalize = capitalize

但是，如果我重构相同的组件以使用 Composition API，VSCode 会显示如下错误：

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

并且由于缺少该属性，组件也不会呈现。

我正在使用 VSCode 和 Volar 和 Volar TypeScript Vue 插件 以及内置的 TypeScript 和 JavaScript 语言功能 扩展，根据 Volar 文档。

我知道在 Vue 3 中你打算使用

app.config.globalProperties

但这显然没有反向移植到 Vue 2.7.

我试过在

types/sfc.d.ts

中使用这个垫片：

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 中所有组件的设置函数中全局提供某些东西的“正确”方法是什么？