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

原始无类型写法(不报错)

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; // 所有属性显式声明为readonly
  readonly 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[]>>>;

完整修正代码示例

TypeScript 复制代码
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数组

关键修改点说明

  1. 接口属性显式只读

    确保 ApplySample 的每个属性都声明为 readonly,与 readonly() 转换后的类型匹配

  2. 注入键类型精确声明

    使用 Readonly<Ref<ApplySample[]>> 而不是 Readonly<Ref<readonly ApplySample[]>>,因为接口已自带只读属性

  3. 数据源类型一致性
    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)

为什么推荐方案三?

方案 类型安全 防止意外修改 IDE提示 代码可维护性
方案一 ⚠️ 部分 ⚠️
方案二
方案三

方案三通过 接口级只读声明 + 精确类型匹配,实现了:

  1. 开发阶段即捕获非法修改

  2. 明确的类型提示

  3. 可维护的代码结构


总结

你的报错本质是 类型系统的精确校验 在发挥作用。通过:

  1. 接口属性显式声明 readonly

  2. 注入键类型精确匹配

  3. 数据源类型一致性

这三个步骤可以完美解决类型冲突,同时保持代码的类型安全和可维护性。这正是TypeScript在Vue 3项目中的核心价值体现------在编译阶段提前发现问题,而不是等到运行时。

相关推荐
li357417 分钟前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj40 分钟前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel1 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel1 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky2 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵2 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld2 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记3 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
叫我阿柒啊4 小时前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices