「TypeScript实用篇」配置了拦截器但axios返回值提示却没变?

本文介绍了如何解决在使用 TypeScript 和 axios 时,返回值提示不正确的问题。通过创建全局类型声明覆盖第三方库的原有定义,以及理解全局类型声明和模块化类型声明的区别,可以实现对 axios 的拦截器返回类型进行自定义,从而提供更准确的类型提示。

本文知识点

  • 全局类型声明和模块

现实场景

在使用axios的时候,我们总会对其进行一些封装或者配置以更简单地用于各自的项目,但一个问题是封装出来的东西或许并不好用,其中一个原因就是axios自带的类型定义,它往往会给出一些不合时宜的提示比如这个。

type ResponseData<T = any> = {code: numberdata: Tmessage: string
} 

点进去可以看到这就是返回类型

理论上我们可以对这个文件进行直接修改,但不巧的是这个文件属于第三方库,在node_modules中,那么是否有在本地代码中修改的方法呢,有的,而且极为简单,在源码文件夹下新建一个types.d.ts文件,并将node_modules/.pnpm/axios@0.27.2/node_modules/axios/index.d.ts复制到其中并做如下修改

需要注意的是,一般情况下我们并不应该直接修改第三方库的类型定义,因为你无法知道是否有别的库依赖这个定义,当然,如果你确定没有,那就改呗。不过更常用的方法是在外面封装一层,对类型进行一个断言,毕竟我们用这些库的时候往往会针对对其做一些适用于项目的增强,顺带就把类型搞了。

知识点解释

全局类型声明

我们在新建的type.d.ts文件中全局声明了一个模块,在TS寻找类型定义的时候优先查找到了此处声明的模块,即,我们的类型定义覆盖了axios原本的类型定义。

模块化的类型声明

刚提到的是全局类型声明,当文件中出现import或者export语句时,便是模块化的类型声明了,当把文件修改成如下内容时

编辑器提示便又恢复原状了

当然,在模块中,也可以声明全局的内容,像下面这样就行了,但需要注意的是模块声明放在declare global下是不生效的。

declare global {type MyString = String
} 

最后,整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值