ts axios 指定返回值类型,返回数据类型不确定该怎么办 typescript

news2024/9/28 10:06:47

ts axios 指定返回值类型,返回数据类型不确定该怎么办 typescript

转到 ts 以来,一直有个问题困扰着我,就是每次用 axios 获取数据时,返回值 res 的类型都不能确定,这就导致编辑器一直提示我:

在这里插入图片描述

原因

原因是它确实不知道这个 diaryApi.detail 返回的 Promise 的内容是什么类型,是什么结构,所以我们需要给它指定一下。

我项目中是这样使用 axios 的:

  1. 封装 axios 到一个通用方法,在这个方法里处理错误信息
    在这里插入图片描述

  2. 再封装一层,这层是基于项目中每个模块的功能进行拆分的,比如:

    • 日记相关 api
    • 用户相关 api
      在这里插入图片描述

解决

首先要做的是给最原始的返回 Promise 的方法添加返回类型: Promise<你需要的类型内容>
我的这个项目返回值很规整,都是这种类型

{
	success: boolean, 
	data: Array<any>|any, 
	message: string
}

没加之前它的返回值是 Promise<?>
在这里插入图片描述

给它加上类型:
在这里插入图片描述
这只是加了一个大体的类型,现在至少使用 res.data res.success 能正常识别了。

在这里插入图片描述

目前它只知道返回值是 {success, data, message} 这种类型的,再往下, res.data 里是什么内容它就不知道了,这个无法统一,因为这个 data 可能是任何内容,如果想让返回值里更明确,就需要在第二层 diaryApi.ts, userApi.ts 指定明确的返回值。

在这里插入图片描述

拿这个 diaryApi.list() 接口为例,指定它的返回值类型

 res.data: Array<DiaryEntity>

在这里插入图片描述

这里的 DiaryEntity 是我定义的一个类型,其内容如下:

在这里插入图片描述

现在它就知道返回值 res.dataDairyEntity[] 这种类型的数组数据了,里面是 DiaryEntity 类型的数据,能更进一步的进行代码提示,像下面这样,它提示 DiaryEntity 里并没有 .weekday 属性

在这里插入图片描述

总结

jsts 相比,ts 适合大型项目,只要把类型写全,再写的时候还是非常爽的,有非常健全的代码提示,确实方便。
但对于小项目,所有类型都需要写两遍,得不偿失。
可以说 ts 是穿在 js 身上的一层盔甲,在上战场的时候用,在家里捏蚂蚁不需要 ts,甚至用了会更麻烦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1363595.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

哪些软件可以把扫描的表格转成EXCEL

也可点击“软件下载” 一、点击“软件下载”下载安装软件后使用&#xff0c;或直接用网页版添加图片再点击“提交识别”来转换。 二、软件安装成功后将待识别的图片添加进去&#xff0c;点击“识别全部”即可&#xff0c;非常简单。

基于SpringBoot大药房管理系统(程序+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;摘 要 伴随着全球信息化发展&…

K8S-服务访问

1 Ingress简介 原理解析 Ingress是授权入站连接到达集群服务的规则集合。从外部流量调度到nodeport上的service从service调度到ingress-controlleringress-controller根据ingress[Pod]中的定义&#xff08;虚拟主机或者后端的url&#xff09;根据虚拟主机名直接调度到后端的一…

[java小贴士]关于double类型进行运算时有误差的相等判断的替代方式

double类型在进行运算时会产生误差, 在不能进行相等判断时可以用绝对值在小于某个范围来替代相等; 如果没有进行运算, 是查询得到或者直接赋值则可以正常进行判断相等

1868_C语言单向链表的实现

Grey 全部学习内容汇总&#xff1a; GitHub - GreyZhang/c_basic: little bits of c. 1868_C语言中简单的链表实现 简单整理一下链表的实现&#xff0c;这一次结合前面看到的一些代码简单修改做一个小结。 主题由来介绍 以前工作之中链表的使用其实不多&#xff0c;主要是…

leetcode 每日一题 2024年01月07日 赎金信

题目 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#xff1a; 输入…

NCC基础开发技能培训

YonBuilder for NCC 是一个带插件的eclipse工具&#xff0c;跟eclipse没什么区别 NC Cloud2021.11版本开发环境搭建改动 https://nccdev.yonyou.com/article/detail/495 不管是NC Cloud 新手还是老NC开发&#xff0c;在开发NC Cloud时开发环境搭建必看&#xff01;&#xff…

小猫踩球Scratch-第14届蓝桥杯Scratch省赛真题第2题

2. 小猫踩球&#xff08;40分&#xff09; 评判标准&#xff1a; 10分&#xff1a;满足"具体要求"中的1&#xff09;&#xff1b; 15分&#xff1a;满足"具体要求"中的2&#xff09;&#xff1b; 15分&#xff0c;满足"具体要求"中的3&#x…

设计模式之享元模式【结构型模式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某…

【金融数据分析】计算2023年沪深300成分股涨跌排行榜

前言 之前的文章中我们已经获取了沪深300成分股的详细个股数据&#xff0c;本文我们来计算一下2023年成分股的涨跌排行榜。 首先看一下效果 详细代码 首先说一下后端的代码&#xff0c;涨跌幅的计算公式如下&#xff1a; &#xff08;2023年最后一天的收盘价-2023年第一天的…

IMS基本架构

IP Multimedia Core Network Subsystem (IMS)商用已久&#xff0c;相对于CS domain的语音方案&#xff0c;IMS则是基于IETF定义的会话控制功能与多媒体传输功能通过IP-CAN实现的 全IP完整语音解决方案。 IMS能为无线和有线用户实现语音、视频、消息、数据等服务。便于运营商通过…

【C++】深入了解构造函数之初始化列表

目录 一、再谈构造函数 1、引入 1&#xff09;构造函数体赋值 2&#xff09;不同成员变量赋值 2、初始化列表 一、再谈构造函数 1、引入 1&#xff09;构造函数体赋值 在创建对象时&#xff0c;编译器通过调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值…

【小沐学C++】C++ 实现鼠标键盘钩子HOOK

文章目录 1、简介2、相关函数2.1 SetWindowsHookEx2.2 UnhookWindowsHookEx2.3 CallNextHookEx 3、相关结构体3.1 KBDLLHOOKSTRUCT3.2 MSLLHOOKSTRUCT 4、挂钩过程5、代码测试5.1 代码1 结语 1、简介 https://learn.microsoft.com/zh-cn/windows/win32/winmsg/about-hooks 挂…

Kali Linux——获取root权限

目录 一、设置root密码 【操作命令】 【操作实例】 二、临时获取root权限 【操作命令】 【操作实例】 三、提升用户到root 1、获取root权限 2、进入/etc/passwd 3、查看root账号ID 4、找到需要修改的用户 5、输入i&#xff0c;进入编辑模式 6、把用户的ID改成跟r…

专为Mac用户设计的思维导图软件MindNode 2023 for Mac助您激发创意!

在现代快节奏的生活中&#xff0c;我们经常需要整理思绪、规划项目、记录灵感。而思维导图作为一种高效的思维工具&#xff0c;能够帮助我们更好地整理和展现思维。现在&#xff0c;我们介绍一款强大而直观的思维导图软件——MindNode 2023 for Mac&#xff0c;助您拓展思维边界…

SqueezeNet:通过紧凑架构彻底改变深度学习

一、介绍 在深度学习领域&#xff0c;对效率和性能的追求往往会带来创新的架构。SqueezeNet 是神经网络设计的一项突破&#xff0c;体现了这种追求。本文深入研究了 SqueezeNet 的复杂性&#xff0c;探讨其独特的架构、设计背后的基本原理、应用及其对深度学习领域的影响。 在创…

第九节HarmonyOS 常用基础组件11-TextPicker

1、描述 滑动选择文本内容的组件。 2、接口 TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string}) 3、参数 参数名称 参数类型 必填 描述 range string[]|Resource 是 选择器的数据。 selected number 否 设置默认选中项在…

2024.1.7周报

目录 摘要 ABSTRACT 一、文献阅读 1、题目 2、摘要 3、模型架构 4、文献解读 一、Introduction 二、创新点 三、实验过程 四、结论 二、深度学习知识 一、从Encoder-Decoder框架中理解为什么要有Attention机制 二、Attention思想 三、Seq2Seq Attention代码逐…

7-35 有理数均值 分数 20

每日一言 我们把世界看错&#xff0c;反说它欺骗了我们。 --飞鸟集 题目 本题要求编写程序&#xff0c;计算N个有理数的平均值。 输入格式&#xff1a; 输入第一行给出正整数N&#xff08;≤100&#xff09;&#xff1b;第二行中按照a1/b1 a2/b2 …的格式给出N个分数形式的…

Python的核心知识点整理大全66(已完结撒花)

目录 D.3 忽略文件 .gitignore 注意 D.4 初始化仓库 D.5 检查状态 D.6 将文件加入到仓库中 D.7 执行提交 D.8 查看提交历史 D.9 第二次提交 hello_world.py D.10 撤销修改 hello_world.py 注意 D.11 检出以前的提交 往期快速传送门&#x1f446;&#xff08;在文…