TypeScript parsedData 类型错误是 Vue3 + TypeScript 开发中处理 SSE（Server-Sent Events）时的高频痛点。当尝试访问event.parsedData却收到"属性不存在"的编译报错时，开发者常困惑于类型定义与实际数据结构的匹配问题。本文将提供一套类型安全的完整方案，帮助你快速修复此类错误并构建健壮的实时通信模块。
为什么会出现 parsedData 类型错误？先理解类型定义与运行时差异
理解问题根源是有效修复的前提。TypeScript 的类型检查发生在编译时，而数据解析发生在运行时：
| 阶段 | 数据类型 | 常见误区 |
|---|---|---|
| 编译时 | event: { timestamp: number; data: string } | 误以为parsedData已存在 |
| 运行时 | event.data是 JSON 字符串，需手动JSON.parse | 忘记解析或解析后未保存 |
关键结论：类型定义必须与实际数据结构一致，若需访问
parsedData，必须在存入events时完成解析并扩展类型。
核心方案：提前解析 + 类型扩展（推荐首选）
步骤 1：定义完整的 SSE 事件接口
// 解析后的数据结构（根据后端实际返回调整）interfaceSSEParsedData{finish_status:'finished'|'processing'round_status?:numberreply?:stringsession_id?:stringround_data?:Array<{type:stringtitle:stringcontent:string}>[key:string]:any// 兼容扩展字段}// 完整事件类型：包含原始数据 + 解析后数据interfaceSSEEvent{timestamp:number// 事件接收时间戳data:string// 原始字符串（用于调试/重解析）parsedData?:SSEParsedData// 可选：解析后的对象}// 声明响应式数组constevents=ref<SSEEvent[]>([])设计要点：
parsedData设为可选字段（?），兼容未解析或解析失败的场景- 保留原始
data字符串，便于调试与降级处理 - 使用索引签名
[key: string]: any兼容后端动态扩展字段
步骤 2：在 onmessage 中解析并保存 parsedData
onmessage:
