JSON转前端模型需开发者主动定义结构、校验类型并转换数据，核心是将原始字段映射为语义清晰、可操作的JS对象或类实例，推荐用TypeScript接口描述契约，类封装行为，并处理字段名差异、类型转换及边界情况。
JSON 数据本身是纯文本格式，没有类型、方法或行为，映射成“标准前端模型”不是自动发生的，而是开发者根据业务逻辑主动定义结构、做类型校验和数据转换的过程。核心在于把原始 JSON 字段按约定规则转为具备语义、可操作、可复用的 JavaScript 对象（或类实例）。
明确模型结构，定义 TypeScript 接口或 JS 类
前端模型的本质是“有契约的数据结构”。推荐用 TypeScript 接口描述字段名、类型、可选性：
- 接口示例：interface User { id: number; name: string; email?: string; isActive: boolean; createdAt: Date; }
- 类封装（带行为）：定义 class User { constructor(data: any) { this.id = data.id; this.name = data.name; this.createdAt = new Date(data.created_at); } }
- 避免直接使用
any或unknown作为接收类型，否则失去类型约束和 IDE 提示能力
解析时做字段映射与类型转换
JSON 中的字段名常与前端模型不一致（如后端用 snake_case，前端用 camelCase），且日期、布尔、空值等需显式处理：
- 用
JSON.parse()得到原始对象后，不直接使用，而是传入构造函数或工厂函数 - 常见转换：
created_at → createdAt；"2023-01-01"→new Date()；"true"或1→true；null→ 默认值（如""或false） - 可借助解构 + 别名重命名：
const { user_id: id, full_name: name, ...rest } = raw
封装安全的解析器，处理边界情况
真实接口返回可能缺失字段、类型错乱、嵌套为空，硬映射易报错。建议封装健壮解析逻辑：
立即学习“Java免费学习笔记（深入）”；
- 检查必要字段是否存在：
if (!raw.id || typeof raw.id !== 'number') throw new Error('Invalid id') - 对嵌套对象/数组做防御性访问：
raw.profile?.avatar_url || '' - 统一处理 null/undefined：用空对象、默认数组或可选链（
?.）+ 空值合并（??） - 批量转换时可用
map()+ 工厂函数：users.map(u => new User(u))
配合状态管理或响应式系统做深度集成
模型不只是静态数据，还要适配 Vue 的 reactive、React 的 useState 或 Zustand 等场景：
- Vue 3 中：用
ref<user>()</user>或shallowRef包裹模型实例，避免响应式代理污染原始结构 - React 中：确保模型属性可被 shallowEqual 比较，避免每次渲染都新建对象导致不必要的重渲染
- 若模型含方法（如
user.isActiveToday()），保持方法在原型上，而非每次解析时挂载
