Vue TypeScript 开发如何为 Provide 和 Inject 注入数据定义强类型

Vue 3 + TypeScript 中为 provide/inject 添加强类型需定义接口、用 Symbol 作键并封装组合式函数。先用 interface 描述数据结构，提供方用 ref<T> 或 reactive<T> 包装，注入方用 inject<T>(key, default) 或非空断言，并推荐 Symbol 键与组合式函数封装以保障类型安全与可维护性。

Vue 3 + TypeScript 中为 provide 和 inject 添加强类型，核心是让类型信息在提供和注入两端保持一致，避免 undefined 或类型丢失。关键不在“能不能”，而在于“怎么写才安全、可维护”。

用接口定义数据结构

先明确你要共享的数据形状，用 TypeScript interface 或 type 描述：

例如主题配置：

1. 定义 Theme 接口，包含 mode（枚举）、primaryColor 等字段
2. 提供方用 ref<Theme> 或 reactive<Theme> 包装数据，再传给 provide
3. 注入方显式标注泛型：inject<Theme>('theme')

注入时必须设默认值或做非空断言

因为 inject() 默认返回 T | undefined，不处理会触发类型错误：

1. 推荐写法：提供默认值，如 inject<Theme>('theme', defaultTheme)
2. 若确定上级必提供，可用非空断言 inject<Theme>('theme')!，但仅限可信上下文
3. 避免直接解构或访问属性前不做判空，比如 theme.value.mode 前确保 theme 不为 undefined

用 Symbol 作 key 实现类型安全与防冲突

字符串 key 易拼错、难追踪；Symbol 可绑定类型，且天然唯一：

1. 创建 const themeKey = Symbol() as InjectionKey<Theme>
2. 提供时：provide(themeKey, themeRef)
3. 注入时：inject(themeKey) —— 类型自动推导，无需重复写泛型
4. 把 key 提到单独文件导出，供多个组件复用，统一管理依赖契约

封装成组合式函数提升复用性

把 provide/inject 逻辑收拢，隐藏细节，暴露语义化 API：

1. 写一个 useThemeProvider()，内部调用 provide 并返回更新方法
2. 写一个 useTheme()，内部调用 inject 并做默认值兜底，返回响应式对象
3. 使用者只需导入这两个函数，不用关心 key 名、类型声明、判空等琐碎逻辑