8 E5 U, L( a* T# j1 a( j
0 D$ {1 y8 l4 h& o: ]( y〖课程介绍〗. P: |5 d+ ^ U `1 o/ r
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
" V# k8 n& ?3 U+ S: p( d. u, y4 x" E' \$ r8 I1 k3 o
; l& N7 a5 a9 N8 N" |5 N! G〖课程目录〗+ E. ~2 Q' x& M7 [9 j/ I
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
M' C$ G4 x( J介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
$ v) G; T* _) c1-1 课程介绍 试看
- v7 d/ W' _+ g: A- P, f" `% ^. {' n w6 N/ ?$ l* h& x$ L4 J
第2章 初识 Typescript【初次体验】
: S5 K/ \+ G* p5 X7 f$ q# S t# j教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。: w2 g6 B1 R B2 L6 ~) L* }0 n
2-1 安装 TypeScript. g A# O- |/ O1 y' J3 |
2-2 编写第一个 TypeScript 程序 试看
' L& k+ }4 V& a/ N
2 X I. k4 s6 v! ]1 {! E7 w第3章 Typescript 类型系统【必备基础，牢固掌握】
/ _6 O& w1 o/ h! Q/ B参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
2 P+ A1 ^3 g2 x8 r; V( ]3-1 基础类型（上）
5 k0 e# w1 l: ~3-2 基础类型（下）
u E7 X2 R3 h" O+ ^. |' d: [* F) v3-3 基础类型（注意版本报错问题）! X, R8 G/ `; b+ L( r
3-4 变量声明 - var 声明
/ y+ k. v6 \( m! a: |3-5 变量声明 - let 声明
; k, q2 \" s# s* c5 X3-6 变量声明 - const 声明
5 T. ?9 M; o! |3 `! i/ ^' O: o3-7 变量声明 - 解构/ Y0 h5 l7 |5 `; |! ]
3-8 变量声明 - 展开$ a( r+ D' y9 k9 G9 H4 ]
3-9 接口 - 接口初探
) \3 }; N2 A9 h) k% u! f' _3-10 接口 - 可选属性+只读属性
$ |) ~4 {" W% ^& o6 M3-11 接口 - 额外属性检查+函数类型+可索引的类型* M" Z- M8 d, i& z/ ]
3-12 接口 -类类型+继承接口+混合类型+接口继承类
+ ]9 W. C3 A2 x$ ~/ f6 J# t3-13 类 - 基本示例+继承% h0 ?: V* m- [. u# I" h
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
! ?$ ?1 ~7 R( E9 R3 n3-15 类 - 存取器+ 静态属性
0 |& R8 e; A" l- { l3-16 类 - 抽象类+ 高级技巧
7 N: b0 `# X, P! B p& X2 A3-17 函数 - 基本示例+ 函数类型2 q# r8 V, ?* B$ t( K9 g1 J
3-18 函数 - 可选参数和默认参数
+ [+ l" m; G5 D+ V, Z; c3-19 函数 - this+ 重载" J# M# n0 k/ G9 g) p* Z
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
# \* _9 F; O& h" K3 b3-21 泛型 - 泛型类+泛型约束
; ~& }1 ? c/ K5 A; W0 ^0 [* [3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
" [% x; M. i S6 o, }- \3-23 高级类型 - 交叉类型
; v2 q4 f- @) t3 D1 a" Z3-24 高级类型 - 联合类型4 ]) M9 g- E1 U& O' n8 r
3-25 高级类型 - 类型保护
0 Y2 b8 o8 Z8 {4 a4 W' m% j3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
2 s: s$ Y) I, Z+ Q- C, d; G1 L- G3 c. t V) d3 A: ~9 b& o/ ?
第4章 ts-axios 项目构建【工欲善其事必先利其器】 w* b* m7 o8 K# L- c9 ]
分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
}* Z' W9 O( s4-1 需求分析
4 l* Q6 n" m& `" U/ b/ G# G4 i4-2 初始化项目 - 创建代码仓库
! }* [3 t8 x3 Q4 m/ G5 H4-3 初始化项目 - TypeScript library starter
* O+ _: S) s* p7 y0 d5 c4-4 初始化项目 - 关联远程分支
1 c9 U5 ?) B+ r% L/ C r+ J4-5 编写基础请求代码 - 创建入口文件# O1 V' k$ v- r. L* `( ` R
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求; D( G0 A4 A! I! _. J1 r1 H
4-7 编写基础请求代码 - demo 编写3 q) G3 l' D* m# E9 f
0 r/ a& g! m; @: d7 z
第5章 ts-axios 基础功能实现【核心流程】5 [) ~% {6 {- Q. q9 g
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
( q. `, o, @& \% J5 x- g5-1 处理请求 url 参数 - 需求分析
. P9 A( ~/ C- v% f5-2 处理请求 url 参数 - buildURL 函数实现: ]2 ^( ~5 K- h
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑$ @! \0 ^7 ~4 t+ ^% G
5-4 处理请求 url 参数 - demo 编写0 b0 u1 L" p+ T5 R0 _* R( c; [, z! B8 x
5-5 处理请求 body 数据 - 需求分析+ 实现 试看; U. w6 M3 }& v3 x
5-6 处理请求 header - 需求分析
/ o$ w; V8 i4 B- _6 I; B5-7 处理请求 header - processHeaders 函数实现 ]: O5 Y" E3 u9 M# S p
5-8 处理请求 header - 实现请求 header 处理逻辑
E( o1 W3 @% }0 ?" L8 |5-9 处理请求 header - demo 编写
8 L% v1 b* ~) I6 A/ y5-10 获取响应数据 - 需求分析+实现, ?- N. ]% [; J% g( d9 H5 X# E
5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用/ l8 H6 d6 n% Q# ^
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
d$ X% P& M. Q, z7 q, T* U4 ~' w8 a, |6 H1 r% Y/ h/ }
第6章 ts-axios 异常情况处理【不可忽视的边界条件】% `* `0 \, K3 ~# v* e" }- ~- M
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
: Y# E( d s6 M& |( D9 H$ O& s. Y6-1 错误处理 - 需求分析- [; Q% H: h: _& ], D, @. v
6-2 错误处理- 网络错误+超时错误+非200状态码+demo4 d2 M& {) Y$ a" A
6-3 错误信息增强 - 需求分析6 ?4 o" X t- n( C# L
6-4 错误信息增强 - 创建 AxiosError 类
9 D2 @' z& A3 ~7 _* Z0 C A1 F. `6-5 错误信息增强 - createError 方法应用+ 导出类型定义
: s, p3 b: r1 O; Z2 w! X- W+ e* N! ~( Y$ P6 v" H
第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
1 }/ W" y% D+ }+ {) n( I8 t把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。% u8 E9 r* Y9 x8 l& l! @
7-1 -1 扩展接口 - 需求分析) @9 t: }& ~, l7 u1 W2 S E+ o
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类/ T x! ]+ o. c# C5 ^/ x8 P, i
7-3 -3 扩展接口 - 混合对象实现+ demo 编写
( d& F6 p9 y5 c, M3 ?- @9 X7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写/ b" q% b- e9 w+ {, |9 o; l
7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写; j! h8 m8 O9 E( Z
4 g* o3 j9 x& b2 @( U6 L. x" w/ m第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】6 ^* M, {; J0 k1 v" r0 N
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
' |6 ?* M$ \2 Z8 P9 p8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
9 y3 G# l* ^) a7 E7 b8 g6 j8-2 -2 拦截器的设计与实现 - 拦截器管理类实现" X9 b; Z8 v* w% {6 @ G' v
8-3 -3 拦截器的设计与实现 - 链式调用实现- h) n! x0 e7 Z" b" m
8-4 -4 拦截器的设计与实现 - demo 编写1 C2 x8 M9 K8 |5 M& w
6 D; w+ I" ^- l. g
第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】' z4 K3 P7 E) }( S8 r8 C
让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。7 P1 t: v% l+ @1 y
9-1 合并配置的设计与实现 - 需求分析 + 默认配置( s% W( Q3 A5 e% T2 b, @8 F1 M
9-2 合并配置的设计与实现 - 配置合并策略（上）
7 O2 Q3 ^# s# `4 A) i& N4 b8 c9-3 合并配置的设计与实现 - 配置合并策略（下）5 A0 X9 c1 I$ j) d% d; U% M+ b
9-4 合并配置的设计与实现 - flatten headers + demo 编写
; z+ h; D, c s5 t! m/ Q8 I4 W9-5 请求和响应配置化- 需求分析+ 修改默认配置2 t3 N& X$ [. M7 q7 f2 j% d. z
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写* |& z$ \/ C- d/ m' l. n
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
6 T2 @. {2 e1 N& U7 N3 v; L; Y3 Z! l( b: J- i6 `
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】1 F- b3 I1 X. w: P, A
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。
( ?3 u, v9 B1 o7 O9 Y! E/ i6 T10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案, {& f0 \3 c9 [& l. O
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口3 V; H+ `' W# }! O* f
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
, ~: y% O; K9 _2 l; ^& K! l W10-4 -4 取消功能的设计和实现 - demo 编写0 J, B j. F4 \, s0 I
8 c$ j! Z3 Y! @5 n% N
第11章 ts-axios 更多功能实现【锦上添花】
' e" I( q% S% q- N7 l" {5 Q0 p9 [实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
( p7 _3 e8 Z- k& \$ u11-1 withCredentials 需求分析&代码实现& demo 编写
+ ]7 I( p' C7 Q5 y6 s, B11-2 xsrf 防御 - 需求分析
; c& g# c f' b% y1 O9 O8 r11-3 xsrf 防御 - 代码编写" D9 \+ n+ A1 d3 m5 M6 \
11-4 xsrf 防御 - demo 编写5 a, r& x' U9 k2 g0 H
11-5 上传和下载的进度监控 需求分析+ 代码实现
^ m# Q" B5 w$ |11-6 上传和下载的进度监控 demo 编写7 I+ o( x" Q* A( d }
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写$ e% a* G$ q$ ?0 o5 Y. G6 v
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写' K- F% _! ]( t4 z6 k! e# {4 q/ P5 N
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
3 H/ M, E" u( J8 q11-10 baseURL 需求分析+ 代码编写 + demo编写1 }9 H. I- \- [3 |4 t
11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
7 e0 B9 _" \/ d/ ], `+ Z! Y4 u+ l4 B0 T# z I. ~: U; k* w4 v
第12章 ts-axios 单元测试【保障代码高质量】
: I% ]6 n# E- L1 X2 i先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
4 |. \! S5 p3 r' G/ ~12-1 前言4 d- I0 U7 m. |" r
12-2 Jest 的安装和配置 Jest 安装
5 x% ]0 B) u; \12-3 辅助模块单元测试 准备工作7 Y6 N" [- Z: }) Z/ w; Y
12-4 辅助模块单元测试 util 模块测试-
* o* h. C5 Z8 U6 A8 \' `12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
* J* ]. D. N5 l6 {$ ^12-6 辅助模块单元测试 headers 模块测试8 _' N0 Y' F9 Q" o9 V6 O- R, l
12-7 辅助模块单元测试 url 模块测试
9 G# E( }$ H" o: K12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
5 r% h: Q9 z6 l+ N# C' U: Z12-9 header 模块单元测试 测试代码编写
* D# S; ~) n3 C! F; L12-10 Axios 实例模块单元测试 测试代码编写2 I" t9 T6 s& O
12-11 拦截器模块单元测试 测试代码编写! ]# n) U! r }7 G
12-12 mergeConfig 模块单元测试 测试代码编写! _( y% Q$ `4 |" n
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试& L* _0 {& M9 v8 n8 ]
12-14 剩余模块单元测试 defaults 模块单元测试' Q5 ~6 w/ O8 g1 y
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
- r( x7 [- d- f12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试
: T: u6 V0 w! h% }( q12-17 剩余模块单元测试 补充未覆盖的代码测试7 k. o6 l: e* n, k
3 n$ S* |) Y, P% X8 {
第13章 ts-axios 部署发布【向社区分享你的项目】! G- Q8 S9 t# q8 O
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
. X7 I3 A! `& y7 F5 S5 K13-1 ts-axios 编译与发布 需求分析 + 编译和打包
# A( M O1 ?" Z8 U) F' j& y13-2 ts-axios 编译与发布 自动化部署- D/ T# L& h3 w& ^% b1 G* k5 A
13-3 ts-axios 编译与发布 运行部署脚本
E& e+ d0 I2 `( y( Y* B0 g$ |13-4 ts-axios 库 在 TS 和 JS 项目中引用
( z) b) Z4 m, A3 M* V" _3 G- D& I4 `1 r
a8 D) H$ S6 n; {. I( z# f第14章 课程总结【知识梳理，巩固加深】
2 n/ v. O# j7 T( M本次课程的整体回顾，总结学习的内容。
5 B# [) `' [ x, _. i$ C# }8 }2 a14-1 课程总结 与回顾
% I. p' {, K9 \8 q! I1 K( P
; |( T/ Q/ J9 Z3 {* j9 T0 w& y
$ s# b. R3 w3 V n〖下载地址〗
) a6 ?$ B1 e6 A) ?" E2 Z: n% Y* V% B& Y; _
) M0 I& H( X. G, l! c8 w
, k* c9 s3 I3 M& R( d& B |
|
[复制链接]
在 TS 和 JS 项目中引用