Vue 的 provide/inject 类型安全需用 Symbol 作注入键并配合 InjectionKey<T>，inject 必须显式传入类型参数，结合组合式函数封装和运行时检查可实现编译期与运行期双重保障。
Vue 的 provide/inject 本身是运行时机制，TypeScript 默认无法推导注入值的类型，直接用字符串键名会丢失所有类型信息，导致 inject 返回 unknown 或 any，IDE 无提示、编译期无校验、重构易出错。要实现严格类型管理，核心不是“绕过类型检查”，而是让 TypeScript 明确知道“提供什么”和“注入什么”。
用 Symbol 作为注入键，杜绝字符串拼写错误
字符串键名（如 'appConfig'）无法被 TypeScript 校验，大小写、空格、单复数都可能出错。改用唯一 Symbol 可彻底解决：
- 在独立文件中统一定义注入 token，避免重复或冲突：
export const APP_CONFIG = Symbol('APP_CONFIG') as InjectionKey<AppConfig> -
InjectionKey<T>是 Vue 提供的泛型类型，专为provide/inject设计，它既是键，又携带类型信息 - 祖辈组件提供时，类型自动绑定：
provide(APP_CONFIG, appConfig)—— 此时 TypeScript 已知该 key 对应AppConfig类型
注入时显式标注类型，不依赖类型推导
即使用了 Symbol，inject 默认仍返回 unknown。必须主动传入类型参数：
typescript-dev
下载
使用 Vite 8、React 19、Tailwind CSS v4、shadcn/ui、Biome、Vitest 和 Hono 构建全栈 TypeScript 应用，涵盖前端（Vite/Rolldown 构建 + 开发）...
- 安全写法（推荐）：
const config = inject(APP_CONFIG)→ 类型是AppConfig | undefined - 若确定必有提供，可用非空断言（仅限已确认场景）：
const config = inject(APP_CONFIG)! - 更稳妥的方式是提供默认值：
const config = inject(APP_CONFIG, () => ({ theme: 'light', apiBaseUrl: '' }))
组合式函数封装，复用类型逻辑
把常用注入逻辑抽成可复用的 Composable，既保持类型安全，又减少样板代码：
立即学习“前端免费学习笔记（深入）”；
- 例如封装主题配置注入：
export function useAppConfig() {<br> const config = inject(APP_CONFIG)<br> if (!config) throw new Error('AppConfig not provided')<br> return config<br>} - 调用方直接获得
AppConfig类型，无需再处理undefined，且类型完全可追溯 - 多个相关 token（如
APP_CONFIG、UPDATE_THEME）可打包进一个 hook，统一提供上下文
配合 provide 的类型守卫，提前拦截缺失依赖
大型项目中，祖辈组件可能遗漏 provide。可在注入端加运行时检查，避免静默失败：
- 自定义注入函数：
function requiredInject<T>(key: InjectionKey<T>): T {<br> const value = inject(key)<br> if (value === undefined) throw new Error(`Missing injection for ${key.description || key.toString()}`)<br> return value<br>} - 使用时：
const config = requiredInject(APP_CONFIG)—— 类型仍是T，且编译期 + 运行期双重保障
