. \- b8 n f! L; R
: X C) X+ y! P6 n3 H7 H: w〖课程介绍〗& m& |2 L. {2 A( P1 G* `
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @( }4 F; ^! K7 o% V. L# k N7 w
, y4 x" E' \$ r8 I1 k3 o) N% ^5 U ]* u/ z1 m! M
〖课程目录〗0 p1 `! o) O, A. ]# L- S/ S1 g
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
! M2 J) {, o% g介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。! |- H/ j6 Q# b6 J, J, s
1-1 课程介绍 试看% o) k, b# `9 F8 e& o! Y
& I; q+ E5 v! T1 b第2章 初识 Typescript【初次体验】' u" w/ ~7 t! a7 ?
教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
. ]0 A) k4 v; x2 D; m2-1 安装 TypeScript
% w- ~& L0 a) u/ \2-2 编写第一个 TypeScript 程序 试看
/ H" F8 b3 @! X7 l# _( ~3 F; C
2 D1 K2 k$ J" I' g% f' P8 W第3章 Typescript 类型系统【必备基础，牢固掌握】) j- M4 X8 B# L) A+ y. [
参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
. \, V( \" N% |5 G* z4 o# ?3-1 基础类型（上）
6 R a! k/ s9 R$ j! M3-2 基础类型（下）
# m6 k2 h' P! n4 K& I o4 Q0 q! ~) T3-3 基础类型（注意版本报错问题）
& K" j# c9 y7 H! {: T4 w k3-4 变量声明 - var 声明" Y: j/ @( B" V0 V. c
3-5 变量声明 - let 声明% L' M. }7 s0 y, a l; p
3-6 变量声明 - const 声明) s7 G4 R1 t, B: }
3-7 变量声明 - 解构
) N' _0 R# I( K T2 J3-8 变量声明 - 展开1 B8 Z, L, g; |. ~
3-9 接口 - 接口初探7 W, w7 C9 B" H/ w% j
3-10 接口 - 可选属性+只读属性
1 G+ x% J7 k7 R) u/ y) L. T3-11 接口 - 额外属性检查+函数类型+可索引的类型& `9 R: V* D5 S3 o" O* m4 |
3-12 接口 -类类型+继承接口+混合类型+接口继承类+ H( \) p, V3 h- g V% ~
3-13 类 - 基本示例+继承& ]' P t- H3 N) s& M2 v6 H
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
5 g' B0 q4 ~8 O2 \, B/ S- Y3-15 类 - 存取器+ 静态属性
$ k% \7 g/ n3 n8 S: C! }3-16 类 - 抽象类+ 高级技巧. j8 k K3 Y3 I: x( _/ J) u
3-17 函数 - 基本示例+ 函数类型* C" O# G. K/ M
3-18 函数 - 可选参数和默认参数" [1 g# g7 A+ i7 Z
3-19 函数 - this+ 重载! z. O& k4 w9 b9 C
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型) F% H) d2 O9 v2 ~* S5 J% M( q
3-21 泛型 - 泛型类+泛型约束& z# i' |$ Z, L7 M% u
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型. y2 h; a4 R) U; }9 K' A1 d- K
3-23 高级类型 - 交叉类型. _. y- E; G. ?2 l
3-24 高级类型 - 联合类型
3 l5 S( Z7 D2 E6 e3 `& s3-25 高级类型 - 类型保护 Z' C6 L% |* F f4 ]0 d4 N9 k
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
. B' b4 z5 m( f d" i% u
# n7 C5 K* X9 R; U' m; z4 C- ^第4章 ts-axios 项目构建【工欲善其事必先利其器】; E0 n+ `" S! v0 i, Q5 I
分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
" C6 h" x4 @: t! J j4-1 需求分析
) K' e; S* w4 b4-2 初始化项目 - 创建代码仓库! h* D- r1 e/ _; W# Y
4-3 初始化项目 - TypeScript library starter" v# Q& L# B% A9 i) ?* q9 B' N5 I
4-4 初始化项目 - 关联远程分支
/ e& [# A7 [8 N: R+ o1 a4-5 编写基础请求代码 - 创建入口文件
7 r7 u$ Q; A( k/ d& a4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
' J7 G, r: K6 M! ]3 g- e9 T4-7 编写基础请求代码 - demo 编写+ E6 q4 N$ ?1 M; h" P4 @$ M3 H: y
6 w t `7 Q. l- N6 u7 k
第5章 ts-axios 基础功能实现【核心流程】
5 U. h, E) y- e8 B' t实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。0 |1 }% x( O' ?3 v
5-1 处理请求 url 参数 - 需求分析
# h; y$ |5 d5 A. ^# n5-2 处理请求 url 参数 - buildURL 函数实现
/ w1 W7 q3 c7 v( S' o% [4 g5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
( j, A( e* R9 D" y3 R! u5-4 处理请求 url 参数 - demo 编写# f( K8 I3 C Z6 ]8 ]$ F
5-5 处理请求 body 数据 - 需求分析+ 实现 试看
) D4 z% h& m% P( G5-6 处理请求 header - 需求分析
( D8 {5 [4 u6 [5-7 处理请求 header - processHeaders 函数实现+ B7 D4 ~7 J8 _% S) C" n$ V
5-8 处理请求 header - 实现请求 header 处理逻辑$ l. K) D' N+ z, ~# f; M5 n
5-9 处理请求 header - demo 编写
6 i( s% @' N, O/ K9 s9 R% w c5-10 获取响应数据 - 需求分析+实现
) J& m! Z7 `4 g9 b5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用5 {3 C7 Z- \8 V8 f; c2 f
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
: z) K! `. f- ]6 o/ \6 S, v1 |+ G% p, l2 h( h- z6 _" _# J& d
第6章 ts-axios 异常情况处理【不可忽视的边界条件】) K- {4 z2 d; S, C4 b
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
: Q/ L" K" T$ u6-1 错误处理 - 需求分析3 {5 I8 {7 f# a" o* z
6-2 错误处理- 网络错误+超时错误+非200状态码+demo0 ?+ t( |7 B7 ] `5 }9 [! k
6-3 错误信息增强 - 需求分析
$ R. e+ R/ U; Q$ U6-4 错误信息增强 - 创建 AxiosError 类
# |' a n, C) W6 h2 [ f/ \6-5 错误信息增强 - createError 方法应用+ 导出类型定义
( }0 j& F' }2 j1 h6 j
) [. f( C2 w4 d# `4 K8 G5 \7 y4 ~第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】4 o, k* \" u7 ?% r; |! X4 J1 Q
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
# F& U2 u% A% Z' l' o8 ~7-1 -1 扩展接口 - 需求分析
" p* n" k8 b, T, J c) @7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
$ i( x" [$ y7 |7-3 -3 扩展接口 - 混合对象实现+ demo 编写1 p. q) }+ O# x7 z2 a0 g
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
' z. m1 ~2 K v$ s+ x7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写
4 w4 S1 Y7 `( }
0 O5 |' b3 J# S1 K+ Y+ f$ C第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
( J F9 p% e" O0 C/ B% A实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。. ?# q P" F/ o9 G/ H, z
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
" U; \; |% ~7 `# s5 H3 e8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
$ Y# m ~: T0 P4 X5 w& g/ i8-3 -3 拦截器的设计与实现 - 链式调用实现
6 j; E8 v' N/ V8-4 -4 拦截器的设计与实现 - demo 编写
. S; {1 \& C }1 @# n x4 e- G
9 A& e# V5 w% J( X( `第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
1 L z: R' e9 C( [: v让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。
8 X" R1 p( v; D8 d3 F, g9-1 合并配置的设计与实现 - 需求分析 + 默认配置: y! @% I2 z( @" L0 w' `
9-2 合并配置的设计与实现 - 配置合并策略（上）
) t( p3 h/ v- @0 L( b* J$ j9-3 合并配置的设计与实现 - 配置合并策略（下）
0 q2 J1 H! F. _+ R; f# i0 A, g- W9-4 合并配置的设计与实现 - flatten headers + demo 编写
0 N0 T8 u( [# j2 e7 q' o9-5 请求和响应配置化- 需求分析+ 修改默认配置
, K- l" ?" {/ l9-6 请求和响应配置化- transform 逻辑重构 + demo 编写0 p/ _0 J! A4 L- @ a; G6 A7 u# G9 Y
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
, I) B$ `) m. F
) d# W; E) i8 E+ ~8 Q第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】# ~" W! K' N; ]: ^% C
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。
' W3 j1 D3 X. s8 g/ J10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案8 H1 a4 z+ l% @6 y+ J3 c5 x
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口8 U, S2 R9 i Q$ ^2 p3 {
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现7 @4 K6 t) e2 V. n
10-4 -4 取消功能的设计和实现 - demo 编写
' i R i X7 a% Q& t0 J, }$ ?
第11章 ts-axios 更多功能实现【锦上添花】
2 n8 X+ A* f& ?1 N* a实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。9 {. u, b' e- F) J
11-1 withCredentials 需求分析&代码实现& demo 编写) U/ e7 N& J1 Q
11-2 xsrf 防御 - 需求分析
, a$ K/ o: n, ?11-3 xsrf 防御 - 代码编写/ f8 o4 @; A: Q6 j: G6 Y: ~
11-4 xsrf 防御 - demo 编写6 i+ B6 ]% P* X" F7 ~
11-5 上传和下载的进度监控 需求分析+ 代码实现
3 A4 T" n# {' \! V7 z. [6 W5 V11-6 上传和下载的进度监控 demo 编写
" X. ]0 X5 }( ?) a11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
n) E+ e8 E1 m( G# U" z11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
' U6 M$ s/ I3 s11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写; `! \+ ^, V/ n# I
11-10 baseURL 需求分析+ 代码编写 + demo编写
# C- N7 e' H2 n5 O H11-11 静态方法扩展 需求分析+ 代码编写 + demo编写8 |7 d% e% h0 G0 x8 X! U
8 q& F1 {) h1 a' T
第12章 ts-axios 单元测试【保障代码高质量】
* b( B) d W4 ]先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
% \% Z2 B4 \, E; m' a12-1 前言
9 z: @: w% L9 L, A& d# V/ [! V12-2 Jest 的安装和配置 Jest 安装- |" J# Z: Q! [, }
12-3 辅助模块单元测试 准备工作
0 G9 M+ ]$ u. C! B/ ^9 c12-4 辅助模块单元测试 util 模块测试-$ d3 m1 m4 j3 K- S& Z% O2 P
12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
+ Q& Y8 [3 n, v ~/ ?$ E. P12-6 辅助模块单元测试 headers 模块测试
9 _8 l# F7 O, y- i6 t12-7 辅助模块单元测试 url 模块测试
8 E7 F: d( j6 d# Y# m2 R5 X12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
. _% x& t) I( b$ L6 S12-9 header 模块单元测试 测试代码编写
* X* J8 r) M) _& G! v12-10 Axios 实例模块单元测试 测试代码编写
$ m: y5 b3 k) E# H: W8 G8 f12-11 拦截器模块单元测试 测试代码编写 r% r0 {$ m# V4 V, g
12-12 mergeConfig 模块单元测试 测试代码编写1 h. b2 ~' t$ n; E' Y; j
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
. C! Z& y2 U, v# L12-14 剩余模块单元测试 defaults 模块单元测试9 R- L. o% R0 n a/ W: [4 c3 i
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
! d* l8 E/ A, V! N0 H! \12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试$ B; H, g: I7 b& v/ s
12-17 剩余模块单元测试 补充未覆盖的代码测试! I; ^' ~. C8 Q4 p4 r+ m* e
2 `2 W7 |. m1 J% M0 y4 ?" W+ q
第13章 ts-axios 部署发布【向社区分享你的项目】
4 a- f& @9 X0 H/ J讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。5 Q/ I: B" H8 Y3 |
13-1 ts-axios 编译与发布 需求分析 + 编译和打包- @) n3 L3 f0 W. A! B& g) m$ f
13-2 ts-axios 编译与发布 自动化部署
. a# J+ R; [6 h0 ?13-3 ts-axios 编译与发布 运行部署脚本: b# o) D a) U0 x9 d: R8 R) _
13-4 ts-axios 库 在 TS 和 JS 项目中引用
3 S6 i4 r/ h5 F5 M$ r, {9 }0 U- ~0 q- S& g3 G$ D: r& F
第14章 课程总结【知识梳理，巩固加深】
% @" |( y" b0 J1 w+ O% y) S# E本次课程的整体回顾，总结学习的内容。
1 J: l. `6 j3 t7 C. a5 v& \4 G14-1 课程总结 与回顾
) T$ l, \" a9 F; G1 l' `* V8 U' d1 E/ x( u% d* g/ e, s: T, S
: S9 [4 r* |) b( a: j- @
〖下载地址〗/ u8 K2 o3 ]$ P+ E
4 K+ t& F, y' ^5 ?" C# S
5 W2 O, K9 l* \- P: j2 s$ [% g& N
& n1 [4 Q! S! a& d
|
|
[复制链接]
在 TS 和 JS 项目中引用