当前位置：首页 > news >正文

Vue3 + TypeScript，使用provide提供只读的响应式数据的详细分析与解决方法

news 来源：原创 2025/4/25 7:11:59

原始无类型写法（不报错）

typescript

const applySampleTableData = ref<ApplySample[]>([]);
const applySampleListSymbol = Symbol("applySampleList");
provide(applySampleListSymbol, readonly(applySampleTableData));

类型推断：此时 applySampleListSymbol 的类型是 symbol
无约束检查：TypeScript 不会严格校验 provide 的值类型

添加类型后的写法（报错）

typescript

const applySampleListSymbol = Symbol("applySampleList");
const applySampleListSymbol = Symbol("applySampleList") as InjectionKey<Readonly<Ref<ApplySample[]>>>;
provide(applySampleListSymbol, readonly(applySampleTableData)); // 报错

深层类型不匹配：readonly() 会将嵌套结构转换为深层只读
类型收缩：实际提供的类型是 Readonly<Ref<**readonly** ApplySample[]>>
（注意数组元素自动变为只读）

类型对比表格

位置	你声明的类型	实际提供的类型
外层Ref	`Readonly<Ref<ApplySample[]>>`	✅ 匹配 `Readonly<Ref<...>>`
数组元素	`ApplySample[]`（可变数组）	`readonly ApplySample[]`（只读数组）
元素属性	假设 `ApplySample` 属性可变	自动变为 `readonly` 属性

修正方案（3种可选）

方案一：放宽注入键类型（推荐）

typescript

// 修改注入键定义（允许只读数组）
const applySampleListSymbol = Symbol("applySampleList"
) as InjectionKey<Readonly<Ref<readonly ApplySample[]>>>;
// 或更精确的写法
type ApplySampleListType = Readonly<Ref<Readonly<ApplySample>[]>>;
const applySampleListSymbol = Symbol("applySampleList"
) as InjectionKey<ApplySampleListType>;

方案二：保持数据可变性（不推荐）

typescript

// 移除readonly包装（失去保护）
provide(applySampleListSymbol, applySampleTableData); // 直接传递可变Ref

方案三：完全类型一致（最佳实践）

typescript

// 步骤1：定义只读接口
interface ApplySample {readonly id: number; // 所有属性显式声明为readonlyreadonly sampleName: string;// ...
}// 步骤2：定义注入键
type ApplySampleListType = Readonly<Ref<ApplySample[]>>;
const applySampleListSymbol = Symbol("applySampleList"
) as InjectionKey<ApplySampleListType>;// 步骤3：提供数据
provide(applySampleListSymbol, readonly(applySampleTableData));

方案四：根据方案三摸索出来的方法，将数组设置为只读 readonly

Readonly<Ref<readonly ApplySample[]>>

typescript

const applySampleListSymbol = Symbol("applySampleList") as InjectionKey<Readonly<Ref<readonly ApplySample[]>>>;

完整修正代码示例

const applySampleTableData = ref<ApplySample[]>([]);
const applySampleListSymbol = Symbol("applySampleList") as InjectionKey<Readonly<Ref<readonly ApplySample[]>>>;
provide(applySampleListSymbol, readonly(applySampleTableData));

完整修正代码示例

typescript

// types.ts
import type { InjectionKey, Ref } from 'vue';// 定义只读接口（核心！）
export interface ApplySample {readonly id: number;readonly sampleName: string;// ...其他字段均声明为readonly
}// 定义注入键类型
export type ApplySampleListType = Readonly<Ref<ApplySample[]>>;
export const applySampleListKey: InjectionKey<ApplySampleListType> = Symbol("applySampleList"
);// 父组件
import { provide, ref, readonly } from 'vue';
import { ApplySample, applySampleListKey } from './types';const applySampleTableData = ref<ApplySample[]>([]); // 注意这里使用接口类型provide(applySampleListKey, readonly(applySampleTableData));// 子组件
const sampleList = inject(applySampleListKey)!;
sampleList.value[0]?.id; // ✅ 可读
sampleList.value.push(); // ❌ TS错误：push不存在于readonly数组

关键修改点说明

接口属性显式只读
确保 ApplySample 的每个属性都声明为 readonly，与 readonly() 转换后的类型匹配
注入键类型精确声明
使用 Readonly<Ref<ApplySample[]>> 而不是 Readonly<Ref<readonly ApplySample[]>>，因为接口已自带只读属性
数据源类型一致性
ref<ApplySample[]> 必须使用已声明只读属性的接口类型

类型安全验证

typescript

// ✅ 允许的操作
sampleList.value.length // 读取数组长度
sampleList.value[0]?.id // 访问属性// ❌ 禁止的操作（TS报错）
sampleList.value = [] // 禁止替换整个Ref
sampleList.value.push({ id: 1 }) // 禁止修改数组结构
sampleList.value[0].id = 123 // 禁止修改属性值（因为接口声明了readonly）