TS 项目中高效处理接口返回数据方法详解

目录
  • 写在前面
  • 问题
  • 解答
  • 区别
  • 总结
  • 必备高效神器

写在前面

在 TypeScript 项目中，TypeScript 对接口返回数据的处理，是日常项目开发中一个比较棘手的问题。

那我们该如何 高效 的解决这个问题呢？

问题

项目中使用 ts 都会碰到如下场景：从接口请求过来的数据该如何进行处理？

const fetchInfo = async (url: string, id: string) => {
  return $http.get(url, params);
}
const res = await fetchInfo('/info', '886');
// 假设 `/info` 接口返回如下数据
{ id: '886', :{ name: 'Jack', : { brand: 'Chinese Pineapple' } } }

那我们该如何得到 的名字以及使用的 品牌呢？

解答

目前比较常用的写法有以下两种

any 大法：

const res:any = await fetchInfo('/info', '886');
console.log(res..name) // Jack
console.log(res..age)  // 3

更加优雅的 interface 写法：

/** 根据接口返回的数据，声明对应的 interface **/
interface Info {
  id: string;
  : Monkey;
}
interface Monkey {
  name: string;
  : Phone;
}
interface Phone {
  brand: string;
}
/** 改写 `fetchInfo` 函数返回值类型 **/
const fetchInfo = async (url: string, id: string): Promise<Info> => {
  return $http.get(url, params);
}
const res = await fetchInfo('/info', '886');
console.log(res..name) // Jack
console.log(res..age)  // 3

区别

两种实现方式的区别十分明显：

any 大法

  • 前期开发代码量少，快速简单。
  • 由于未定义 interface 导致整个项目充斥着大量 any 类型，项目沦为 AnyScript。
  • 无法获得健全的 ts 语法检测功能，弱化了使用 ts 的作用。
  • 后期维护成本高，后端修改字段，ts 语法无法检测。

interface

  • 前期开发代码量大，需要为每个接口定义 interface。
  • 获得丰富的代码提示以及语法检测能力。
  • 后期项目易维护，接口字段改动，只需要同步更新 interface 数据即可实现类型检测。

总结

通过上面的总结不难看出，interface 方式优势众多，但同时也有着一个致命的弊端：

我们在前期的开发过程中需要对所有接口返回的不同数据类型定义对应的 interface。

例如上面示例的 /info 接口我们就需要定义三个 interface ，实际项目中，字段数量可能达到几十上百个！

interface Info {
  id: string;
  : Monkey;
}
interface Monkey {
  name: string;
  : Phone;
}
interface Phone {
  brand: string;
}

这对于我们前期开发效率来说无疑是 毁灭性 的

必备高效神器

基于上面 interface 方式所面临的问题

给大家安利一款前端在线代码生成工具：JsonToAny （ Gitee / GitHub ）

能够很轻松的将我们接口返回的 JSON 数据转换成我们前端所需要的 interface

最大限度的节省了我们手动定义 interface 的时间

p>至此，我们完美解决的了 interface 方式最大的弊端，一劳永逸。

以上就是TS 项目中如何高效的处理接口返回的数据的详细内容，更多关于TS 项目处理接口返回数据的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • TS中最常见的声明合并(接口合并)

    目录 1.合并接口 1.1非函数成员 1.2函数成员 前言: 今天要讲的内容还是TS相关,在TS中最常见的声明合并:接口合并 在聊接口合并之前,我们先来聊聊声明合并 声明合并: 什么是声明合并? 其实很好理解,TS中的声明合并,指的就是编译器会针对同名的声明合并为一个声明 合并的结果: 合并后的声明会同时拥有原先两个或多个声明的特性 疑问: 那这两个或多个具体指的是什么呢? 其实得分几种情况讲,今天要讲的就是其中一种,最简单也最常见的声明合并类型是接口合并 1.合并接口 我们刚刚说了,"合并后的

  • 基于ts的动态接口数据配置的详解

    基于ts的动态接口数据配置的详解

    需求前景 前端组件是可复用的,那么复用前端组件时从后端读取的数据源同样也需要可复用(后端api也要是配置化的方式进行),前端需要提供配置项给后端进行动态配置生成api. 具体实现流程 名词解析 mock 规范约束 使用的ts的 interface 进行编译前校验,所有的组件接收的 mock 结构,都必须是该 Interface 的实现 解析器 将mock打平成 key,value 结构的工具 eg. interface I_EchartOption { series: { data: { nam

  • 项目中使用TypeScript的TodoList实例详解

    目录 为什么用todolist todolist的ts化 数据到视图 实现handleTodoItem readonly 分类 交叉类型 新增功能 联合类型 可选属性 数据转视图 总结 为什么用todolist 现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定.遍历.条件判断等各种逻辑,而能完成这一系列内容的,todolist就是个很好的实现,比如react的教程.solijs教程都是以todolist为例 当然,你如果想看各种框架实现tod

  • 详解如何发布TypeScript编写的npm包

    目录 前言 项目 初始化项目 构建库 添加测试 发布 测试一下 总结 前言 在这篇文章中,我们将使用TypeScript和Jest从头开始构建和发布一个NPM包. 我们将初始化一个项目,设置TypeScript,用Jest编写测试,并将其发布到NPM. 项目 我们的库称为digx.它允许从嵌套对象中根据路径找出值,类似于lodash中的get函数. 比如说: const source = { my: { nested: [1, 2, 3] } } digx(source, "my.nested[

  • TypeScript 中 as const使用介绍

    目录 引言 例子 例子 引言 as const 是 TypeScript 中的一个用于修饰符,它可以被用来修改类型推断的行为. 当 as const 修饰符用在变量声明或表达式的类型上时,它会强制 TypeScript 将变量或表达式的类型视为不可变的(immutable).这意味着,如果你尝试对变量或表达式进行修改,TypeScript 会报错. 例子 const foo = ['a', 'b'] as const; foo.push('c'); // TypeScript 会报错,因为 fo

  • Typescript装饰器AOP示例详解

    目录 在Typescript中使用装饰器 配置 类装饰器 方法装饰器 AOP(面向切面编程) 在Typescript中使用装饰器 上文中讲了装饰模式,今天来来介绍一些Typescript里面的装饰器,以及如何用装饰器来实现之前提及装饰模式,装饰器只是实现装饰模式的一种方式,并非唯一 配置 在Typescript要使用装饰器需要在tsconfig打开装饰器的语法 "compilerOptions": { "experimentalDecorators": true }

  • TS 项目中高效处理接口返回数据方法详解

    目录 写在前面 问题 解答 区别 总结 必备高效神器 写在前面 在 TypeScript 项目中,TypeScript 对接口返回数据的处理,是日常项目开发中一个比较棘手的问题. 那我们该如何 高效 的解决这个问题呢? 问题 项目中使用 ts 都会碰到如下场景:从接口请求过来的数据该如何进行处理? const fetchInfo = async (url: string, id: string) => { return $http.get(url, params); } const res =

  • Java实现读取项目中文件(.json或.properties)的方法详解

    目录 1. 读取json file 1.1 Json dependency 1.2 字节流 1.3 buffer reader 2. 读取properties file 3. 好看的css样式 1. 读取json file 1.1 Json dependency <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • Python中高效的json对比库deepdiff详解

    Python中高效的json对比库deepdiff详解

    目录 deepdiff是什么 deepdiff安装 案例1.对比txt文件 案例2.对比json 工作中我们经常要两段代码的区别,或者需要查看接口返回的字段与预期是否一致,如何快速定位出两者的差异?除了一些对比的工具比如Beyond Compare.WinMerge等,或者命令工具diff(在linux环境下使用),其实Python中也提供了很多实现对比的库,比如deepdiff和difflib,这两个的区别是deepdiff显示的对比效果比较简洁,但是可以设置忽略的字段,difflib显示的对

  • Django中get()和filter()返回值区别详解

    先上官方文档! filter(**kwargs) 返回包含与给定查找参数匹配的对象的新查询集. 简单来说,返回一个又对象组成的查询集合 get(**kwargs) 返回与给定查找参数匹配的对象,该对象应采用字段查找中描述的格式. 例子 例如在Model中有一个Order类,包含一个id字段,输入 id 为2019 字段的 id 1.get()方法 orders = Orders.objects.get(id=20190003) print(order) 先查看orders是什么,结果为 Orde

  • python更新数据库中某个字段的数据(方法详解)

    连接数据库基本操作,我把每一步的操作是为什么给大家注释一下,老手自行快进. 请注意这是连接数据库操作,还不是更新. import pymysql #导包 #连接数据库 db = pymysql.connect(host='localhost', user='用户名', password='数据库密码', port=3306, db='你的数据库名字') #定义游标 cursor = db.cursor() #sql语句 sql = 'select * from students;' cursor

  • webpack项目中使用vite加速的兼容模式详解

    webpack项目中使用vite加速的兼容模式详解

    目录 前言 目的 要处理的问题 动手 共用 index.html 共用配置 兼容环境变量 自动导入 资源引入 svg-sprite-loader 替代方案 其他 效果 前言 随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待. vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着.

  • Flutter在项目中使用动画不使用包实现详解

    目录 前言 正文 1 按下按钮柔软的感觉 2 想要一个像 Instagram 一样的喜欢按钮吗? 3 动画页面过渡 4 动画文字 5 更改/闪动文本样式 前言 动画对于 web 和移动应用程序都非常重要.但是在移动应用程序中不应该使用夸张的动画.简单但是很多动画使你的应用程序更好用.以至于当你点击一个按钮时,一种平滑的感觉或者页面过渡都会影响到你. 正文 1 按下按钮柔软的感觉 class _CustomButtonState extends State<CustomButton> with

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • Android中实现ping功能的多种方法详解

    使用java来实现ping功能. 并写入文件.为了使用java来实现ping的功能,有人推荐使用java的 Runtime.exec()方法来直接调用系统的Ping命令,也有人完成了纯Java实现Ping的程序,使用的是Java的NIO包(native io, 高效IO包).但是设备检测只是想测试一个远程主机是否可用.所以,可以使用以下三种方式来实现: 1. Jdk1.5的InetAddresss方式 自从Java 1.5,java.net包中就实现了ICMP ping的功能. 使用时应注意,如

随机推荐