VueJS中带类型的Provide/Inject引用代码优化问题

问题1：直接解构注入值的TS错误解决 #

你遇到的TS错误是因为inject默认返回类型为注入值类型 | undefined，哪怕你能确保子组件仅在有注入值时渲染，TypeScript仍会做严格类型检查。要实现直接解构，有三种实用方案：

方案A：非空断言（快速解决） #

直接告诉TS注入值必然存在，适合能100%保证父组件已提供值的场景：

<script setup lang="ts">
import dsKey from '@/injectionKeys/documentSet'

const { documentSet, update } = inject(dsKey)!
</script>

方案B：封装必注入工具函数（推荐长期复用） #

如果多处需要必注入逻辑，写一个工具函数省去重复断言，还能在异常场景抛出明确错误：

// utils/inject.ts
import type { InjectionKey } from 'vue'
import { inject } from 'vue'

export function injectStrict<T>(key: InjectionKey<T>): T {
  const value = inject(key)
  if (!value) {
    throw new Error(`无法注入键为${key.description}的值，请确认父组件已提供`)
  }
  return value
}

子组件使用：

<script setup lang="ts">
import dsKey from '@/injectionKeys/documentSet'
import { injectStrict } from '@/utils/inject'

const { documentSet, update } = injectStrict(dsKey)
</script>

方案C：传入兜底占位符（不推荐） #

给inject传一个Symbol()作为兜底，让TS认为不会返回undefined，但这种方式没有异常提示，仅适合临时调试：

<script setup lang="ts">
import dsKey from '@/injectionKeys/documentSet'

const { documentSet, update } = inject(dsKey, Symbol() as never)
</script>

问题2：简化Provide/Inject实现，减少冗余 #

优化1：合并注入键与类型定义 #

把注入键和对应类型放在同一文件，避免重复导入类型：

// injectionKeys/documentSet.ts
import type { Ref } from 'vue'
import type { InjectionKey } from 'vue'
import type DocumentSet from '@/types/DocumentSet'

// 导出复用类型
export type DocumentSetInjection = {
  documentSet: Ref<DocumentSet>,
  update: () => void
}

export default Symbol() as InjectionKey<DocumentSetInjection>

父组件使用：

<script setup lang="ts">
import dsKey, { type DocumentSetInjection } from '@/injectionKeys/documentSet'
import type DocumentSet from '@/types/DocumentSet'
import { ref, provide } from 'vue'

const documentSet = ref<DocumentSet | null>(null)
const dsInjection: DocumentSetInjection = {
  documentSet,
  update: () => console.log('update')
}
provide(dsKey, dsInjection)
</script>

优化2：简化父组件提供逻辑 #

如果update函数是操作documentSet的专属逻辑，直接提供绑定好的对象即可，无需额外包装：

<script setup lang="ts">
import dsKey from '@/injectionKeys/documentSet'
import type DocumentSet from '@/types/DocumentSet'
import { ref, provide } from 'vue'

const documentSet = ref<DocumentSet | null>(null)
const update = () => {
  // 这里写具体更新逻辑，比如请求接口后更新documentSet
  console.log('update triggered')
}

provide(dsKey, { documentSet, update })
</script>

优化3：Vue 3.3+语法糖简化 #

如果使用Vue 3.3及以上版本，可配合语法糖直接解构（仍需非空断言保证类型安全）：

<script setup lang="ts">
import dsKey from '@/injectionKeys/documentSet'

const { documentSet, update } = inject(dsKey)!
</script>

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