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

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,甚至用了会更麻烦。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入理解可变参数

目录 1.C语言方式 1.1.宏介绍 1.2.原理详解 1.3.案例分析 1.4.其他实例 2.C之std::initializer_list 2.1.简介 2.2.原理详解 2.3.案例分析 3.C之可变参数模版 3.1.简介 3.2.可变参数个数 3.3.递归包展开 3.4.逗号表达式展开 3.5.Lambda 捕获 3.6.转发参数包 4…

LN和BN

假设batch为2&#xff0c;&#xff08;2&#xff0c;3&#xff0c;256&#xff0c;256&#xff09;这样的样本 LN比较直观就是在每个独立的样本上计算均值和方差&#xff0c;然后归一化。&#xff08;2&#xff0c;3&#xff0c;256&#xff0c;256&#xff09; 归一化是将数…

十、基本对话框大集合(Qt5 GUI系列)

目录 一、设计需求 二、实现代码 三、代码解析 四、总结 一、设计需求 Qt提供了很多标准的对话框。例如标准文件对话框(QFileDialog)、标准颜色对话框(QColorDialog)、标准字体对话框 (QFontDialog)、标准输入对话框 (QInputDialog) 及消息对话框 (QMessageBox)。本文展示各…

JVM之内存模型带参数

Spring Boot程序的JVM参数设置格式(Tomcat启动直接加在bin目录下catalina.sh文件里)&#xff1a; java ‐Xms2048M ‐Xmx2048M ‐Xmn1024M ‐Xss512K ‐XX:MetaspaceSize256M ‐XX:MaxMetaspaceSize256M ‐jar xxxxxx.jar-Xss&#xff1a;每个线程的栈大小 -Xms&#xff1a;设置…

http 503 错误

503错误是一种HTTP状态码&#xff0c;表示你请求的网站或服务暂时不可用&#xff0c;通常是因为服务器过载或维护&#xff0c;你可能会看到类似这样的提示&#xff1a;503 Service Unavailable、503 Service Temporarily Unavailable、HTTP Server Error 503、HTTP Error 503 I…

数据分析求职-简历准备

简历在整个求职过程中的重要性不言而喻&#xff0c;今天咱们来聊求职过程中简历准备的那些事儿~ 1. 简历究竟有啥用 求职的流程简单说就是&#xff1a;网申->笔试->面试->offer 其中网申环节&#xff0c;简历100%决定了你的通过与否&#xff0c;这个点大家都知道。…

计算机基础面试题 |09.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

谈谈我眼中的用户分层分析!

大家好&#xff0c;我是阿粥。 用户分层是几乎所有品牌都会思考的一个重要命题。 合理的分层能够帮助品牌有效提升用户的忠诚度。 这篇文章&#xff0c;我会带大家熟悉用户分层的基本概念、价值以及分层分析的思路。内容略干&#xff0c;在看的时候可以喝两口水。 同样&#xf…

css-、串联选择器和后代选择器的用法

& &表示嵌套的上一级&#xff0c;这是sass的语法&#xff0c;代表上一级选择器 .btn {&.primary {background-color: #007bff;color: #fff;} } 编译出来的结果是同一个元素&#xff0c;有两个类名&#xff0c;两个类名之间没有空格&#xff1a; .btn.primary {…

分布式【zookeeper面试题23连问】

1. ZooKeeper是什么&#xff1f; ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终&#x…

花了一小时,拿python手搓了一个考研背单词软件

听说没有好用的电脑端背单词软件&#xff1f;只好麻烦一下&#xff0c;花了一小时&#xff0c;拿python手搓了一个考研背单词软件。 代码已经开源在我的github上&#xff0c;欢迎大家STAR&#xff01; 其中&#xff0c;数据是存放在sqlite中&#xff0c;形近词跳转是根据jaro …

开源游戏引擎:创造无限可能 | 开源专题 No.56

godotengine/godot Stars: 62.6k License: MIT Godot Engine 是一个功能强大的跨平台游戏引擎&#xff0c;可用于创建 2D 和 3D 游戏。它提供了一套全面的常见工具&#xff0c;让用户可以专注于制作游戏而不必重复造轮子。该引擎支持将游戏一键导出到多个平台上&#xff0c;包…

阿里云服务器Valheim端口2456、2457和2458放行设置

使用阿里云服务器搭建Valheim英灵神殿需要开启2456-2458端口&#xff0c;阿里云服务器默认只开放了22核3389端口&#xff0c;开通2456端口是在安全组中配置的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器安全组开通端口流程&#xff1a; 阿里云服务器安…

超简单|配图详细| 双系统Ubuntu22.04 系统磁盘扩容

文章目录 1. 打开磁盘工具2. 格式化空闲分区3. 挂载该分区4. 数据迁移与备份5. 卸载原分区6. 挂载新的/home分区7. 重启系统8. 删除原来的数据8.1 直接格式化分区8.2 没有单独的/home分区1. 查看设备名2. 重新挂载该分区3. 删除原始分区/home目录中的内容4. 卸载原分区5. 重启 …

项目初始化脚手架搭建

项目初始化脚手架搭建 仓库地址 easy-web: 一个快速初始化SpringBoot项目的脚手架 (gitee.com) 目前这个项目还是个单体项目&#xff0c;后续笔者有时间可能会改造成父子工程项目&#xff0c;将通用模块抽象出来&#xff0c;有兴趣的小伙伴也可以自行 CV 改造。 1、项目初始化…

嵌入式-stm32-基于HAL库的感应开关盖垃圾桶项目(开源)

嵌入式-stm32-感应开关盖垃圾桶项目&#xff08;开源&#xff09; 网盘资料 《嵌入式-stm32-基于HAL库的感应开关盖垃圾桶项目&#xff08;开源&#xff09;》 目录 一&#xff1a;项目概述 二&#xff1a;材料准备 三&#xff1a;细节分析&#xff08;重点&#xff09; 四&…

有详细一些的考研数学真题解析吗?

考研数学真题解析可以写得很详细&#xff0c;但是纸质资料可能受限于篇幅与排版等原因&#xff0c;没有把过程写得很详细。 但是&#xff0c;如果解析步骤不够详细的话&#xff0c;可能读者在看的时候就会因为其中某一个被省略的步骤而“卡壳”&#xff0c;进而需要花费很多额…

CAAC无人机操作证考证报名流程及白底证件照片制作方法

在这个无人机技术日新月异的时代&#xff0c;拥有一张CAAC民用无人机操作证不仅意味着你能够合法地在天空翱翔&#xff0c;也象征着你对飞行技术的尊重和对规章制度的遵守。如果你怀揣着成为无人机飞行员的梦想&#xff0c;那么&#xff0c;让我们一起揭开CAAC民用无人机操作证…

9.java——(杂例)组合,代理,向上转型static,fianl,关键字(有道云笔记复制粘贴,大家整体性的把握)

组合——内部有类&#xff08;心中有对象&#xff01;&#xff01;&#xff01;&#xff09;&#xff08;足球 和足球运动员梅西和脚下的足球一样&#xff09; has和is的区别&#xff0c;has是组合&#xff0c;是有&#xff0c;持有的意思&#xff1b;is是继承&#xff0c;是…

Vue开发中使用Element UI过程中遇到的问题及解决方案Missing required prop: “value”

一、vue中使用el-table的typeindex有时不显示序号 Table 表格 用于展示多条结构类似的数据&#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。 当el-table元素中注入data对象数组后&#xff0c;在el-table-column中用prop属性来对应对象中的键名即可填入数据&…