Vue2.7+TypeScript组合式API中全局实例属性找不到名称问题

一、修复类型提示问题 #

Vue 2.7的组合式API类型系统基于@vue/runtime-core，而非旧类组件的vue/types/vue接口。你需要修改全局类型声明，将$capitalize扩充到ComponentCustomProperties接口：

1. 在项目根目录创建types/global.d.ts文件，写入以下内容：

import Vue from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $capitalize: (str: string) => string
  }
}

// 确保文件被视为模块，避免类型合并冲突
export {}

2. 检查tsconfig.json，确保类型文件被正确包含：

{
  "compilerOptions": {
    "types": ["vue"],
    "typeRoots": ["./node_modules/@types", "./types"]
  },
  "include": ["src/**/*", "types/**/*"]
}

二、运行时访问全局属性 #

组合式API的setup函数中无法直接通过this访问Vue实例，需使用getCurrentInstance()获取组件实例，再通过proxy访问全局属性：

场景1：普通setup组件 #

<script lang="ts">
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  setup() {
    const instance = getCurrentInstance()
    // 可选链避免实例不存在的情况
    const capitalize = instance?.proxy?.$capitalize

    // 使用示例
    const formattedText = capitalize?.('hello world') || ''

    return { formattedText }
  }
})
</script>

场景2：