在 Vue + TypeScript 中，为 provide 注入的响应式对象添加只读约束，需用 readonly 包裹 reactive 或 ref 后 provide，并在 inject 时用 Readonly 或 ReadonlyRef 显式标注类型，配合 Symbol key 和避免 toRefs 破坏只读性，确保不可变、响应式与准确类型提示。
在 Vue + TypeScript 项目中，为 provide 注入的响应式对象添加只读约束，核心目标是：**让注入方（inject）拿到的数据不可被意外修改，同时保持响应式更新能力，并获得准确的类型提示**。这不能靠 const 或 Object.freeze() 实现，而应结合 readonly、类型标注与注入方式协同完成。
用 readonly 包裹响应式源再 provide
这是最直接且推荐的做法。先对响应式对象（ref 或 reactive）应用 readonly()，再传给 provide：
-
provide的值必须是readonly代理，而非原始响应式对象——否则注入方仍可修改 - 若提供的是
ref，需对ref.value做只读处理，或直接包装整个ref（readonly(ref)返回只读 ref） - 若提供的是
reactive对象，用readonly(obj)得到深度只读代理
示例：
import { provide, readonly, reactive, ref } from 'vue'
// 方式一：提供只读 reactive 对象
const state = reactive({ count: 0, name: 'Alice' })
provide('sharedState', readonly(state))
// 方式二：提供只读 ref
const config = ref({ theme: 'light', lang: 'zh' })
provide('appConfig', readonly(config)) // 类型推导为 Readonly<Ref<...>>
注入时用泛型明确只读类型
inject 默认返回任意类型，需主动用泛型声明只读语义，避免 TS 允许赋值操作：
立即学习“前端免费学习笔记（深入）”；
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
- 对
readonly(reactive())注入，使用Readonly<t></t>类型（如inject<readonly state>>('sharedState')</readonly>） - 对
readonly(ref)注入，类型应为ReadonlyRef<t></t>，这是 Vue 提供的内置类型 - 配合
as const或字面量类型，可进一步收紧不可变性（如配置项）
示例：
import { inject, ReadonlyRef } from 'vue'
// 注入只读 ref
const appConfig = inject<ReadonlyRef<{ theme: string }>>('appConfig')
// 注入只读 reactive 对象
interface SharedState {
count: number
name: string
}
const sharedState = inject<Readonly<SharedState>>('sharedState')
配合 Symbol key 避免字符串污染与类型擦除
用字符串作为 provide/inject 的 key 会丢失类型关联。改用 Symbol 并导出类型，能实现 key 与类型的双向绑定：
- 定义唯一 Symbol，并导出其类型（如
declare module '@vue/runtime-core' { interface ComponentCustomProperties { $sharedState: Readonly<sharedstate> } }</sharedstate>） - 或更轻量：将 Symbol 与接口一起导出，注入时直接复用类型
- 这样
inject(KEY)的返回值类型可由 KEY 推导，无需重复写泛型
示例：
// types.ts
export const SHARED_STATE_KEY = Symbol('sharedState') as unknown as InjectionKey<Readonly<SharedState>>
// provider.ts
import { provide, readonly, reactive } from 'vue'
import { SHARED_STATE_KEY } from './types'
const state = reactive({ count: 0 })
provide(SHARED_STATE_KEY, readonly(state))
// consumer.ts
import { inject } from 'vue'
import { SHARED_STATE_KEY } from './types'
const state = inject(SHARED_STATE_KEY) // 类型自动为 Readonly<SharedState>
避免 toRefs 解构破坏只读性
如果注入的是 readonly(reactive())，后续又用 toRefs 解构，解构出的 ref 默认是可写的 —— 这会绕过只读保护：
- 错误做法：
const { count } = toRefs(inject(...))→count.value = 5不报错 - 正确做法：先用
toRefs，再对每个 ref 应用readonly；或直接访问只读对象属性（state.count），不额外解构 - 若必须解构，可用
toRefs(readonly(obj))，但注意toRefs返回的是普通 ref，需手动包装
安全解构示例：
const sharedState = inject<Readonly<SharedState>>(KEY)
if (sharedState) {
// 直接使用，保持只读语义
console.log(sharedState.count)
// 如需 ref 形式，显式 readonly 包装
const countRef = readonly(toRef(sharedState, 'count')) // 类型为 ReadonlyRef<number>
}
