Vue3中InjectionKey的使用

// 祖先组件
provide('theme', ref('dark'))

// 后代组件
const theme = inject('theme') // theme 的类型是 any，你心里没点数吗

interface InjectionConstraint<T> {}

export type InjectionKey<T> = symbol & InjectionConstraint<T>

const key: InjectionKey<string> = Symbol('test')

console.log(typeof key) // 'symbol'，它就是个普通 Symbol

const themeKey: InjectionKey<Ref<string>> = Symbol('theme')

// TypeScript 编译器的内心独白：
// "themeKey 是 InjectionKey<Ref<string>>，
//  所以 inject(themeKey) 的返回值应该是 Ref<string> | undefined"

type UserId = string & { __brand: 'userId' }
type OrderId = string & { __brand: 'orderId' }

const uid: UserId = '123' as UserId
const oid: OrderId = '456' as OrderId

// 虽然运行时都是 string，但 TypeScript 认为它们是不同类型
// 你不能把 UserId 赋值给 OrderId，编译报错

// keys.ts
import type { InjectionKey, Ref } from 'vue'

export const themeKey: InjectionKey<Ref<string>> = Symbol('theme')

// 祖先组件
import { provide, ref } from 'vue'
import { themeKey } from './keys'

const theme = ref('dark')
provide(themeKey, theme)

provide(themeKey, 42) // ❌ 类型 'number' 不能赋值给类型 'Ref<string>'

// 后代组件
import { inject } from 'vue'
import { themeKey } from './keys'

const theme = inject(themeKey) // 类型自动推导为 Ref<string> | undefined

const theme = inject(themeKey)! // Ref<string>
// 或者给个默认值
const theme = inject(themeKey, ref('light')) // Ref<string>

// keys.ts
import type { InjectionKey, Ref, ComputedRef } from 'vue'

interface ThemeContext {
  current: Ref<string>
  toggle: () => void
  isDark: ComputedRef<boolean>
}

export const themeKey: InjectionKey<ThemeContext> = Symbol('theme')

// ThemeProvider.vue
<script setup lang="ts">
import { ref, computed, provide } from 'vue'
import { themeKey } from './keys'

const current = ref('dark')
const toggle = () => {
  current.value = current.value === 'dark' ? 'light' : 'dark'
}
const isDark = computed(() => current.value === 'dark')

provide(themeKey, { current, toggle, isDark })
</script>

<template>
  <slot />
</template>

// 任意后代组件
<script setup lang="ts">
import { inject } from 'vue'
import { themeKey } from './keys'

const theme = inject(themeKey)!

// 全部有类型提示，一个字母都不会错
theme.current.value  // string
theme.toggle()       // void
theme.isDark.value   // boolean
</script>

src/
├── keys.ts          ← 所有 InjectionKey 集中管理
├── components/
│   └── ...