TypeScript parsedData 类型错误排查：SSE 事件解析与类型安全实战

张开发
• 2026/6/9 21:15:53 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

TypeScript parsedData 类型错误排查：SSE 事件解析与类型安全实战
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=refSSEEvent[]([])设计要点：parsedData设为可选字段（?），兼容未解析或解析失败的场景保留原始data字符串，便于调试与降级处理使用索引签名[key: string]: any兼容后端动态扩展字段步骤 2：在 onmessage 中解析并保存 parsedDataonmessage:

更多文章