Vue3.3+Vite中路径别名导入导致Provide/Inject类型丢失问题

问题重现 #

我有一个包含Provide逻辑的文件notification.hook.ts：

export const NOTIFICATION_PROVIDE: InjectionKey<NotificationProvide> = Symbol(PROVIDE_INJECT.NOTIFICATION)

// code...

provide(NOTIFICATION_PROVIDE, {
  message,
  setNotification,
})

用相对路径导入时一切正常：

import { NOTIFICATION_PROVIDE } from '../hooks/notification.hook'

const { setNotification } = inject(NOTIFICATION_PROVIDE)

但改用路径别名导入时：

import { NOTIFICATION_PROVIDE } from '@/hooks/notification.hook'

WebStorm抛出错误：

Vue: Property setNotification does not exist on type {}

已在vite-env.d.ts中添加declare module '*.hook'，但问题未解决。

问题原因 #

1. 主TS配置未包含src目录：tsconfig.json的include仅指定了declaration.d.ts，导致TypeScript无法解析src目录下的文件类型，使用路径别名导入时，IDE无法获取NOTIFICATION_PROVIDE的正确类型，默认推断为{}。
2. 多余的模块声明：添加的declare module '*.hook'会强制TypeScript将.hook.ts文件视为无类型模块，覆盖了原有类型定义，反而导致类型丢失。

解决方案 #

1. 修复tsconfig.json的include配置 #

修改主tsconfig.json，让TypeScript能扫描到src下的所有相关文件：

{
  "compilerOptions": {
    // 保持原有配置不变
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "declaration.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

2. 移除多余的模块声明 #

删除vite-env.d.ts中的declare module '*.hook'语句，因为.hook.ts是标准TypeScript模块，无需额外声明。

3. 刷新WebStorm缓存 #

WebStorm可能缓存了旧的类型信息，需要手动刷新：

• 点击菜单栏 File -> Invalidate Caches...
• 选择Invalidate and Restart，等待IDE重启后重新加载配置。

验证 #

完成上述步骤后，使用路径别名导入NOTIFICATION_PROVIDE，WebStorm将正确识别NotificationProvide类型，inject返回值的类型不再是{}，解构setNotification时不会再报错。

内容的提问来源于stack exchange，提问作者major697