Inject 注入后如何进行类型推断？TypeScript 与 Vue3 通信结合

陆砚码

2026-10-12 • 👁 0人浏览过

Vue 3 中 inject 的类型安全需显式指定泛型或使用 Symbol + InjectionKey；推荐 InjectionKey 方式避免拼写错误并自动推导类型，配合封装 Hook 可提升复用性与健壮性。在 Vue 3 的 Composition API 中使用

inject

时，TypeScript 默认无法自动推断注入值的类型，因为

inject

接收的是字符串 key，属于运行时信息。要获得完整的类型安全，需显式提供类型参数或利用依赖注入的类型声明机制。手动指定泛型类型最直接的方式是在调用

inject

时传入泛型参数，明确告知 TypeScript 返回值类型：写法示例：

const store = inject('store');

若注入值可能为

undefined

（未提供 provider 或可选注入），应使用联合类型：

const api = inject('api');

也可配合默认值避免

undefined

：

const config = inject('config', {} as Config);

配合 provide 的类型定义统一管理更健壮的做法是将注入的 key 和类型一起定义在模块中，形成“契约”：创建一个

types.ts

或

injectionKeys.ts

：

export const StoreKey = Symbol('store') as InjectionKey;

provide 侧使用该 symbol：

provide(StoreKey, store);

inject 侧直接使用，类型自动推导：

const store = inject(StoreKey); // 类型即为 Store，无需泛型

Symbol +

InjectionKey

是 Vue 官方推荐方式，既保证类型安全，又避免字符串拼写错误在 setup() 外部或组合式函数中安全使用若在非 setup 函数（如工具函数、自定义 Hook）中调用

inject

，需确保当前存在有效的 injection context： Vue-router参考手册 Vue-router参考手册下载下载立即学习 “ 前端免费学习笔记（深入） ”； Vue 3 要求

inject

必须在 setup()、生命周期钩子或已注册的组合式函数内调用；否则会返回

undefined

且无类型提示建议封装带类型的注入函数，增强复用性：

export function useStore() {
  const store = inject(StoreKey);
  if (!store) throw new Error('Missing store provider');
  return store;
}

这样调用方只需

const { state } = useStore();

，类型完全收敛在 Hook 内部与 defineComponent / script setup 的协同在