利用json-to-ts工具进行转换,放置在typeScript.ts文件中

后端,返回了 100 个字段,现在拿到的那 100 个字段里,里面还有那种深层嵌套的"对象套对象",利用json-to-ts工具进行转换,然后前端定义后端的response这个返回对象,要怎么定义,是不是要把没有用的数据也放置在typeScript.ts文件中??

答案:以下是答案,可以参考一下;;

不要让一个接口长达几百行。把嵌套的对象拆出来:

TypeScript

复制代码
// 定义底层小对象
interface Address {
  city: string;
  street: string;
}

// 定义中层对象
interface UserProfile {
  id: number;
  name: string;
  address: Address; // 引用上面的定义
}

// 定义最终的 Response
export interface FinalResponse {
  code: number;
  data: UserProfile;
}
第二步:批量删除"干扰项"

types.ts 中,直接删掉工具生成的那些诸如 create_time, update_user, is_deleted, ext_field_1 等后端数据库字段。只要你的代码里不调用 data.create_time,删掉它对程序运行没有任何影响。

第三步:标记可选字段 ?

后端有些字段可能有时返回、有时不返回。对于这些不确定的深层数据,记得加上 ?

TypeScript

复制代码
interface NestedInfo {
  coupon_detail?: any; // 如果不显示,直接用 any 并设为可选
}

要把这种复杂的 JSON 数据解析到前端页面并转化为 TypeScript,最优雅的做法是定义接口 (Interface)

TypeScript 的核心优势就是类型约束 。通过定义接口,你可以在编写代码时获得精准的自动补全,并防止因为拼错字段名(比如把 total 写成 tolal)导致的 Bug。


第一步:定义 TypeScript 接口 (Interface)

根据你提供的 JSON 结构,我们需要定义一套嵌套的接口。你可以把这段代码放在一个名为 types.ts 的文件中:

TypeScript

复制代码
// 1. 定义单条搜索结果的结构
interface ResultVo {
  id: string;
  title: string;
  description: string;
  url: string;
  author: string;
  pic_list: string[];
  comment_count: number;
  view_count: number;
  // 根据 JSON 结构,这里还可以继续添加更多字段
}

// 2. 定义整体返回的数据结构
interface CsdnSearchResponse {
  code: number;
  message: string;
  total: number;
  result_vos: ResultVo[];
  split_words: string[];
  tag_lists: string[];
}

第二步:在前端请求中应用类型

假设你在使用 axios 或原生的 fetch 来获取数据,你可以直接将接口挂载到请求函数上。

使用 Axios (推荐)

TypeScript

复制代码
import axios from 'axios';

async function getSearchData() {
  // 泛型约束:告诉 axios 返回的数据符合 CsdnSearchResponse 结构
  const response = await axios.get<CsdnSearchResponse>('/api/search');
  
  // 现在,当你输入 response.data. 时,编辑器会自动提示 result_vos
  console.log(response.data.total); 
  
  return response.data.result_vos;
}
使用 Fetch API

TypeScript

复制代码
async function fetchSearchData(): Promise<CsdnSearchResponse> {
  const res = await fetch('/api/search');
  const data: CsdnSearchResponse = await res.json();
  return data;
}

如果你的 JSON 数据非常庞大(比如有几百个字段),手动写接口简直是折磨。我推荐你一个小妙招:

  1. 复制你的完整 JSON 内容。

  2. 在 VS Code 中搜索并安装插件 "JSON to TS"

  3. 按快捷键 Ctrl+Shift+Alt+V,它会自动根据你剪贴板的内容生成完美的 TypeScript 接口定义。

JSON 里的某些字段可能是 null 或者可选的。建议在定义接口时,对于不确定的字段加上 ?,例如 pic_list?: string[];,这样在数据缺失时程序也不会报错。

相关推荐
海带紫菜菠萝汤3 小时前
FFmpeg.wasm 实践:在浏览器中运行 FFmpeg 的能力边界与性能瓶颈
前端·javascript·ffmpeg·音视频·wasm
名字还没想好☜3 小时前
React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
前端·javascript·react.js·bug·react·next.js
不好听6133 小时前
TypeScript 类型系统:`type` vs `interface` 与 `import type`
typescript
upgrador3 小时前
桌面应用开发:Electron 与 NSIS 的关系、打包流程及 Windows 本地构建实战
javascript·windows·electron
我要两颗404西柚3 小时前
Stage three:VUE工程化与实战工具
前端·javascript·vue.js
写不来代码的草莓熊4 小时前
Cesium 地图交互绘制圆形、多边形
前端·javascript·地图
红叶舞5 小时前
成数据绑定对象,在应用程序中处理完数据后,将更新的数据序列化为JSON传回远端服务器,很多移动应用使用了这种模式处理服务器端的数据。 ...
运维·服务器·json
JackSparrow4145 小时前
前端安全之JS混淆+请求加密+请求签名以提升爬虫难度
前端·javascript·后端·爬虫·python·安全
kyriewen18 小时前
我用AI写了半年代码——回头看,这5个能力正在退化
前端·javascript·ai编程
晓说前端19 小时前
TypeScript 高级特性 —— 类型断言与泛型
前端·typescript