Vue3+TypeScript中globalProperties配置后this.$isDebug为undefined问题

1. 修正全局属性命名一致性 #

你在main.ts里挂载的是isDebug，但类型声明里定义的是$isDebug，两者命名不匹配导致无法通过this.$isDebug获取到值。需要在挂载全局属性时加上$前缀：

// main.ts
const global = app.config.globalProperties;
global.$isDebug = true; // 补充$前缀，与类型声明的命名对齐

2. 调整类型声明的类型范围 #

你把$isDebug的类型固定为字面量true，会限制后续修改该值的灵活性，建议改为通用的boolean类型，同时添加导出语句确保类型被全局识别：

// vue-shim.d.ts
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $isDebug: boolean; // 改为boolean类型
    }
}

export {};

3. 确认类型声明文件的有效性 #

确保你的类型声明文件命名为vue-shim.d.ts，且放置在src目录或项目根目录下。如果文件位置特殊，需要在tsconfig.json的include数组中添加该文件路径：

// tsconfig.json
{
  "include": [
    "src/**/*.d.ts",
    // 其他需要包含的文件路径
  ]
}

4. 重启开发服务 #

修改类型声明文件后，TypeScript可能不会自动更新类型缓存，需要重启Vue开发服务（如npm run dev），确保配置和类型生效。

内容的提问来源于stack exchange，提问作者서다운