Vue 依赖注入怎么在组合式 API 中编写类型安全的注入包装函数-Vue.js-PHP中文网

vue 3 中类型安全的依赖注入必须使用 injectionkey，而非字符串 key，以确保 typescript 正确推导 ref、computedref 等响应式类型；需用 symbol 声明唯一键并标注泛型类型，provide 和 inject 均需严格匹配类型，推荐封装为带校验的自定义 hook。

vue 依赖注入怎么在组合式 api 中编写类型安全的注入包装函数

在 Vue 3 组合式 API 中，类型安全的依赖注入不能只靠字符串 key，必须配合 InjectionKey —— 这是 Vue 提供的唯一能保证类型推导不丢失的机制。直接用字符串调用 inject('xxx') 会导致返回值为 unknown 或 any，TypeScript 无法校验结构和响应式类型。

定义类型安全的 InjectionKey

每个注入项都应声明一个唯一的 Symbol 类型 key，并明确标注其绑定值的完整类型：

使用 Symbol() 创建唯一标识，避免字符串冲突
用泛型指定 value 的精确类型（如 Ref<user></user>、ComputedRef<string></string>、() => void）
推荐集中管理 key，例如新建 keys.ts

示例：

import type { InjectionKey, Ref, ComputedRef } from 'vue'
<p>export interface User {
id: number
name: string
}</p><p>// 响应式对象
export const userKey: InjectionKey<ref>> = Symbol()</ref></p><p>// 计算属性
export const fullNameKey: InjectionKey<computedref>> = Symbol()</computedref></p><p>// 普通函数
export const logoutKey: InjectionKey void> = Symbol()
</p>

在祖先组件中 provide 并保持类型一致

provide 时必须传入与 key 类型匹配的值，否则 TypeScript 会报错：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

确保 provide(userKey, userRef) 中 userRef 确实是 Ref<user></user>
不要对 key 做类型断言绕过检查，那会破坏类型安全
若提供默认值，也需满足相同类型约束

示例：

import { ref, provide } from 'vue'
import { userKey } from './keys'
<p>const user = ref<user>({ id: 1, name: 'Alice' })
provide(userKey, user) // ✅ 类型匹配
</user></p>

在后代组件中 inject 并获得完整类型推导

inject 接收类型化的 key 后，返回值自动具备精确类型，无需额外断言：

返回值是 Ref<user> | undefined</user>，TS 可识别 .value 和响应式行为
可直接解构、计算、watch，IDE 能正确提示属性和方法
带默认值时，类型仍保持收敛（如 inject(userKey, ref({ id: 0, name: '' }))）

示例：

import { inject, computed, watch } from 'vue'
import { userKey, fullNameKey, logoutKey } from './keys'
<p>const user = inject(userKey)
const fullName = inject(fullNameKey)
const logout = inject(logoutKey)</p><p>if (user) {
console.log(user.value.name) // ✅ TS 知道 name 是 string
watch(() => user.value.id, () => { /<em> ... </em>/ }) // ✅ 正确监听
}</p><p>if (logout) {
logout() // ✅ 自动补全，无 any 风险
}
</p>

封装可复用的类型安全注入 Hook

把常用注入逻辑抽成自定义 hook，进一步简化调用并强化约束：

接收 key 作为泛型参数，返回带非空断言或默认值的注入结果
可内置错误提示（如未 provide 时抛出警告）
支持响应式、函数、只读等多种形态

示例（useUser.ts）：

import { inject, getCurrentInstance } from 'vue'
import { userKey } from './keys'
<p>export function useUser() {
const instance = getCurrentInstance()
const user = inject(userKey)</p><p>if (!user && instance) {
console.warn('[useUser] Missing provider. Did you call provide(userKey, ...) in an ancestor?')
}</p><p>return user
}
</p>

在组件中直接使用：const user = useUser()，类型仍是 Ref<user> | undefined</user>，且具备上下文感知能力。