拿起Typescript做一个轮子（一）

最新推荐文章于 2024-08-22 09:19:35 发布
最新推荐文章于 2024-08-22 09:19:35 发布
阅读量422 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanstu/article/details/94392129
版权
本文将介绍为何选择用Typescript重构Axios，分析其背后的原因，并详细阐述重构的过程，包括项目初始化、需求分析及目录结构。通过此过程，可以深入理解Typescript和Axios的工作原理。
摘要由CSDN通过智能技术生成

从今天起我将从零用Typescript重构Axios，不仅可以让我从真实的项目中掌握Typescript，也能让我对一个库的实现有更深刻的掌握

为什么学习Typescript?

最近TypeScript 的火爆程度大有成为下一代前端开发语言的趋势，TypeScript 作为 JavaScript 语言的超集，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更健壮的组件。其次Typescript是技术转型的趋势，很多大公司的前端团队已经陆续往Typescript技术栈上转型，享受Typescript带来的便利。

为什么选择Axios？

  • Axios非常有名
  • 通过对Axios的重构可以让我们对其内部实现的原理了如指掌，让我们工作中更加熟练的使用
  • 代码量适中，学习起来不会有太大的压力

需求分析

Features

  • 在浏览器端使用XMLHttpRequest对象通讯
  • 支持Promise API
  • 支持请求和响应的拦截器
  • 支持请求和响应的数据转换
  • 支持请求的取消
  • JSON数据的自动转换
  • 客户端防止XSRF

这里的重构不包括axios在Node中的实现。

初始化项目

TypeScript library starter

这里我们使用这个脚手架工具，它可以帮我们快速初始化一个TypeScript项目。

使用方式

git clone https://github.com/alexjoverm/typescript-library-starter.git YO
最低0.47元/天 解锁文章
sanstu
关注
拿起Typescript做一个轮子（三）
sanstu的博客
07-11 334
Url处理 需求分析 把params参数拼接到url上，参数值支持对对象、数组、Date、特殊字符串的处理，丢弃url中的哈希标记，保留url中已存在的参数 我们在src下新建helpers文件夹作为我们之后存放公共辅助函数的地方，在该文件夹下新建url.ts和util.ts文件，url.ts编写对url进行处理的相关逻辑，util.ts编写对数据类型进行判断的相关逻辑。 因为在处理url时...
如何做一个匀速旋转的轮子
卡夫卡的DOVE的博客
11-30 694
做一个匀速旋转的轮子
从今天开始，拿起 TypeScript 做一个轮子的制造者
weixin_34290000的博客
05-05 477
前言 前端这些年发展非常迅速，社区里涌现了一堆优秀的轮子，比如Vue、React、Angular、jQuery、axios 等，它们解决着不同领域下的问题。使用这些轮子能极大地帮助我们提升生产力，有些人甚至基于这些轮子二次开发了一些轮子，比如 element-ui、ant-design 等组件库。我们在享受这些轮子给我们带来的便利的时候，有时候也需要面临一些问题：某些轮子不能满足我们自己的特殊业务...
TypeScript Library Starter 使用教程
最新发布
gitblog_00379的博客
08-22 367
TypeScript Library Starter 使用教程 typescript-library-starterStarter kit with zero-config for building a library in TypeScript, featuring RollupJS, Jest, Prettier, TSLint, Semantic Release, and more!项目地...
基于TypeScript从零重构axios
07-10
前端最新脚本语言TypeScript的视频课程,适合初学者和前端需要自学新技术的老司机快速掌握基于TypeScript的好视频
产品前端重构（TypeScript、MVC框架设计）
weixin_34005042的博客
02-27 152
最近两周完成了对公司某一产品的前端重构，本文记录重构的主要思路及相关的设计内容。 公司期望把某一管理类信息系统从项目代码中抽取、重构为一个可复用的产品。该系统的前端是基于 ExtJs 5 进行构造的，后端是基于 Asp.net MVC 提供的 REST 数据接口。同时，希望通过这次重构，不但能将其本身重构至可用于快速二次开发的产品，同时还要求该前端代码要保证相对的独立，使得同时可以接入 .NET...
typescript第五天—联合类型和类型保护、Enum枚举类型
a_bald_girl的博客
12-16 567
联合类型和类型保护 联合类型展示 所谓联合类型，可以认为一个变量可能有两种或两种以上的类型。用代码举个例子，声明两个接口Waiter(服务员)接口和Teacher(技师)接口，然后在写一个judgeWho(判断是谁)的方法，里边传入一个animal(任意值)，这时候可以能是Waiter,也可能是Teacher。所以我们使用了联合类型，关键符号是|(竖线)。 interface Waiter { anjiao: boolean; say: () => {}; } interface Teach
TypeScript由浅到深
dageliuqing的博客
11-12 799
声明:类型 = 类型对应变量复制代码类型收敛——字面量类型复制代码本篇文档讲述了一些基本的类型操作，和一些小的知识点，讲了一些实际场景的类型问题以及如何完成一个类型工具，并介绍了一些常用的类型工具轮子。类型收敛、类型工具非常重要，优化类型收敛、类型工具都是TS官方近两年迭代的主题，比如关键词satisfies，Awaited类型工具、《医院证明图片》模版字符串、优化控制流分析等等。
TypeScript免费视频图文教程（2W字）
专注于dreamweaver网页设计制作
08-08 580
出这个教程也是为了迎接Vue3的推出，今晚更新最后一集视频后，开始更新Vue3视频。我原本准备更新 Vue3.x 教程的，由于官方文档一直不出，我又不敢瞎讲，所以干脆先来一个 TypeScript 教程热身，TypeScript 已经在我们公司全面使用了，现在招聘的环节也增加了一个要求，就是要求必须熟练使用 TypeScript。我以前也出过 TypeScript 的教程，不过那个太简单，不够深入。所以在这个空档期，准备自己重学一下 TypeScript，然后也也出一个比较完全的教程。努力做到全网最好的免费
TypeScript 从零实现 axios 0x2 项目初始化
cell的博客
03-04 305
功能分析 初始化项目 TypeScript libray starter git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios npm i 关联远程仓库 git remote add origin https://gitee.com/username/ts-axios.git...
axios-TS:使用typescript重构axios库
03-20
Axios-TS 使用typescript重构axios库
ts-axios:TypeScript实现axios
03-31
TypeScript库启动器 一个启动项目，使创建TypeScript库非常容易。 用法 git clone https://github.com/alexjoverm/typescript-library-starter.git YOURFOLDERNAME cd YOURFOLDERNAME # Run npm install and write your library name when asked. That's all! npm install 开始编码！ package.json和入口文件已经为您设置好了，因此不必担心链接到您的主文件，键入内容等。只需保留这些文件的名称相同即可。 特征 调零。 运行npm install后，将为您npm install东西 :winking_face: 和多个优化捆绑包的 使用测试，报道和交互式观看模式 和实现代码格式设置和一致性 使用自动将文档生成并部署到g
从0开始学习TypeScript
08-10
从0开始学习TypeScript，基于TypeScript从零重构axios，并进行单元测试与部署发布。
typescript-library-starter
05-22
打字稿库启动器 一个打字稿节点库的示例，它利用具有CJS向后兼容性的native es模块。 特征 文档生成 使用TSDoc注释和@ microsoft / api-extractor 注意事项 仅输入不支持的进出口 CJS向后兼容 汇总为条件导出提供了CJS包。 较旧的Node版本将使用“ main”条目。 较新的Node版本将使用“ exports”，它指定import应该使用es模块，并要求应该使用cjs汇总包。 Mocha测试使用本机模块支持 测试是用JS编写的，并针对dist输出运行，但仍通过tsserver进行类型检查。 工作流程开始构建任务tsc - watch - tsconfig.json并运行测试/ 通常，可以使用不带任何批注的推断类型对测试进行严格的类型检查，并且如果需要的类型可以使用jsdoc进行批注。 好处是测试不需要编译，使用声明类型和生成输出。
ts-library-starter:具有零配置的入门工具包，用于在TypeScript中构建库。用于内置TypeScript库的零配置脚手架
03-29
ts-library-starter 简介 用于编写TypeScript库的零配置脚手架（起步项目）。支持多语言的友好引导程序，帮助您完成git和从开发，测试到发布的完整流程配置。 需求 Git CLI的版本是2.7.1或更高； 部分工具要求Node.js的版本是10.18或更高； NPM CLI版本保持最新。 使用 # Clone to the folder where you want to start the library. git clone https://github.com/calimanco/ts-library-starter.git YOURFOLDERNAME # Enter the folder. cd YOURFOLDERNAME # Run npm install and follow the interactive guide to answer ques
TypeScript 从零实现 axios 0x6 接口扩展
cell的博客
03-23 811
接口扩展 接口定义 // ./src/type/index.ts export type Method = | 'get' | 'GET' | 'delete' | 'DELETE' | 'head' | 'HEAD' | 'options' | 'OPTIONS' | 'post' | 'POST' | 'put' | 'PUT' | '...
使用Typescript重写axios
weixin_34040079的博客
05-29 1040
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Typescript重构axios(一)——写在最前面
嘿嘿
05-25 211
1.使用Typescript重构axios(一)——写在最前面2.使用Typescript重构axios(二)——项目起手，跑通流程3.使用Typescript重构axios(三)——实现基础功能：处理get请求url参数4.使用Typescript重构axios(四)——实现基础功能：处理post请求参数5.使用Typescript重构axios(五)——实现基础功能：处理请求的header6.使用Typescript重构axios(六)——实现基础功能：获取响应数据7.使用Typescript重构axi
用typescript写一个项目
06-06
假设您已经有一个项目目录，您可以在该目录下创建一个 `tsconfig.json` 文件，该文件用于配置 TypeScript 项目的编译选项。下面是一个示例 `tsconfig.json` 文件： ```json { "compilerOptions": { "target": ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值