" d0 V! n/ d% x: _4 X$ |3 o
! T# ]- x0 w' e9 ]
〖课程介绍〗
8 A8 V ~. q' a0 M! R/ q2 S TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @1 \+ ~/ `4 B* M; N; H- H
, y4 x" E' \$ r8 I1 k3 o
" {2 v7 |8 g& Z/ f% |* ^〖课程目录〗( |$ E+ _( e) E9 W+ [( y
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
) g. t4 J" \2 g2 A介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。8 L: v" q2 j) ^7 v9 |
1-1 课程介绍 试看
. E. H2 [' c/ `% N# |% t# [( F' d4 G0 u
第2章 初识 Typescript【初次体验】
7 u s. F1 R0 F6 h" u/ J5 [教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
$ n" D" P+ A1 f" N- L/ A7 t2-1 安装 TypeScript
" w/ @! I+ o, _0 M0 o z. e4 Z2-2 编写第一个 TypeScript 程序 试看) y' W; z; U4 j" t) C
) h5 b/ x/ ^" @6 N
第3章 Typescript 类型系统【必备基础，牢固掌握】
( Z) }# K, D7 v) C6 E: ]参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
. d/ y2 P3 V( b& ^0 v5 _4 E& }3-1 基础类型（上）
5 w; ?* ~) l/ ?$ ^6 Y3-2 基础类型（下）% E' o; P3 i7 H& @, u4 u
3-3 基础类型（注意版本报错问题）
4 p6 m6 q) k) X0 }' Q. d3-4 变量声明 - var 声明 v i6 a0 X$ Y( S; I# Z7 A/ G- S
3-5 变量声明 - let 声明
0 Z7 d* ]; y. i3 I9 _2 U4 t3-6 变量声明 - const 声明- R8 s, P# \2 X9 U( X; E- V& U. e
3-7 变量声明 - 解构. v" l$ `* f' f
3-8 变量声明 - 展开( I1 l8 I: Z. N/ f q* a0 R6 L
3-9 接口 - 接口初探
0 _# p6 i4 H1 q6 R) l3 |4 f3-10 接口 - 可选属性+只读属性7 h4 Y: d4 k) N4 S( e
3-11 接口 - 额外属性检查+函数类型+可索引的类型
8 f! e% o2 m( J3-12 接口 -类类型+继承接口+混合类型+接口继承类 L' }( I6 k: D" U7 h4 i
3-13 类 - 基本示例+继承
5 M& \/ |) V8 d7 a) ^7 [3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
1 E6 L+ ~0 B5 l: ?7 b& Q8 I5 c- X; a3-15 类 - 存取器+ 静态属性2 r. |9 Y" w# e- }' @
3-16 类 - 抽象类+ 高级技巧* l3 `! X8 V! v5 i) V5 x1 f
3-17 函数 - 基本示例+ 函数类型
" \8 B! V5 L# x/ }5 n: O/ h3-18 函数 - 可选参数和默认参数 V+ [$ {" Q4 ?; e9 T
3-19 函数 - this+ 重载
R9 E4 T( Y! I& v( l3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
3 Y: e/ A; r' M p3-21 泛型 - 泛型类+泛型约束$ f4 @* |% E- N. V8 \4 g2 g
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型6 ?+ a2 C) z( H& u$ B8 p; c
3-23 高级类型 - 交叉类型
$ L9 S% r: k9 y! K* `6 W n3-24 高级类型 - 联合类型$ C/ w1 w3 H. Z- C+ I; @9 x' i
3-25 高级类型 - 类型保护; V. C. n6 L0 v- D1 `) ~
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
8 i9 o7 x! I" w5 ?7 | Y; ~
. m5 o C( M) Q* x第4章 ts-axios 项目构建【工欲善其事必先利其器】
F/ u9 t6 }7 M. j' i分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。7 `5 y" i; _9 e# ?% B8 k- T
4-1 需求分析/ _1 G$ l/ l2 q: q) C, n
4-2 初始化项目 - 创建代码仓库 T R7 x1 v0 X; }9 B8 g, Q% j
4-3 初始化项目 - TypeScript library starter
0 b" p6 ?: m, @' t/ `. H$ D4-4 初始化项目 - 关联远程分支
8 ]0 I* Q4 P7 x. D: m$ P4-5 编写基础请求代码 - 创建入口文件
& J) \! H; p/ S4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求. T$ U; p9 t+ _( F8 H* Z, f, _, {
4-7 编写基础请求代码 - demo 编写; S, f+ k0 V9 F0 c
# {3 y4 M; b5 L" s! I# y+ B第5章 ts-axios 基础功能实现【核心流程】2 j2 m6 M) t b! z. N) }* S; z
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。 R0 j! `7 |5 J3 q+ X1 E+ I+ E$ X
5-1 处理请求 url 参数 - 需求分析
3 J* I5 G# `1 n v4 d5-2 处理请求 url 参数 - buildURL 函数实现
- S7 c) ~9 ~2 X' o& Z# l5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
$ g2 \2 B% A& C; O& [& P- O- K" o5-4 处理请求 url 参数 - demo 编写
7 `7 Y- f8 D# [5-5 处理请求 body 数据 - 需求分析+ 实现 试看- n5 Z2 v: G4 l) s
5-6 处理请求 header - 需求分析
; @ F6 y- @) {5-7 处理请求 header - processHeaders 函数实现( q! j3 E4 j. R7 C0 d! O9 f" c
5-8 处理请求 header - 实现请求 header 处理逻辑$ m, L# H1 {" p5 R- C# s
5-9 处理请求 header - demo 编写
5 C# Q; K3 G7 V# N0 ?$ j/ @5-10 获取响应数据 - 需求分析+实现
6 u' ^" f: H) J9 V" Y& N1 {3 C- ^' \, I9 [5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用: A: P; O' P* n7 I# c8 I8 l/ F. q
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用& A! u1 A5 u& V( m3 b
: @/ P' g. e" i; X" ~0 z; Z1 \, _% L第6章 ts-axios 异常情况处理【不可忽视的边界条件】
# c) L$ K! c' k3 F) V6 ?1 s+ P7 B处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
3 F9 h+ c& j$ C& }6-1 错误处理 - 需求分析. E# g9 h, v$ w L
6-2 错误处理- 网络错误+超时错误+非200状态码+demo) `# \" _; o. b; m
6-3 错误信息增强 - 需求分析
! j! @6 X& S2 I; S& c* w" E$ I6-4 错误信息增强 - 创建 AxiosError 类
# P6 w0 x$ t3 k; a6-5 错误信息增强 - createError 方法应用+ 导出类型定义
5 k- \' _6 N' E& X- p' G
, x! z& ` C! V* [4 ?1 P5 H第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】0 v) m2 p2 J% [6 Y0 j W
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
1 w, S- h% D/ V6 I- O+ i+ g+ N3 d: w7-1 -1 扩展接口 - 需求分析
4 [% W% K4 _& M: b7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
" r8 |0 ]( O( G/ ]7-3 -3 扩展接口 - 混合对象实现+ demo 编写 c' }5 y7 p6 v# F
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
: ~5 R4 W+ ^8 t- L- _- l7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写
' V, D9 o2 Z, w, r) b+ A" ?' z" J$ g+ a# B
第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】: H$ Y" r3 ^4 c
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
: O/ y& N2 V! T/ b0 H8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
6 Y, f1 {9 \# e0 g2 W" K P8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
$ a( f- N: G$ c, ~- h. b! }8-3 -3 拦截器的设计与实现 - 链式调用实现
4 S; y) b, l8 ?8-4 -4 拦截器的设计与实现 - demo 编写
0 v+ @) S: _# a f
3 U- u0 s1 X7 N4 y2 x, W6 q0 o) x第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
! Q# t& [/ X5 _9 h- [4 D0 B让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。
+ S2 M5 F* D! I- O9-1 合并配置的设计与实现 - 需求分析 + 默认配置
* z* g" f* a6 u+ l# W% f9-2 合并配置的设计与实现 - 配置合并策略（上）
4 K& A( y1 j9 v! B. f" [! q9-3 合并配置的设计与实现 - 配置合并策略（下）
% q* `2 D: ]/ u9 q! Y; ~9-4 合并配置的设计与实现 - flatten headers + demo 编写; a+ h$ @1 j6 r# K/ o' U' G
9-5 请求和响应配置化- 需求分析+ 修改默认配置, u' x9 d; O) u k8 R; w5 u
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
& u% d/ @! [8 X4 _. E% p3 c4 o9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现: ~ Y" n! b6 g& c( X
- I0 q0 r1 J; V7 M
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】9 j; e+ n+ O3 T6 }
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。- _2 ?5 M% }; y6 {0 q
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
& @9 I# D7 t" K4 w. `9 S10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口
2 H; D2 z5 [8 u3 b* ]' u10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现" J& e, D `9 U1 K7 Y6 H9 [/ p% E: g
10-4 -4 取消功能的设计和实现 - demo 编写1 s: i5 p& R9 P+ [/ `- e
1 ]9 B! V2 A& ~+ R7 V1 y
第11章 ts-axios 更多功能实现【锦上添花】4 v: m! ~1 {4 ~# y
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
, P" T5 W! g6 p3 u11-1 withCredentials 需求分析&代码实现& demo 编写
n% ^6 C' ~* {/ u5 G+ B11-2 xsrf 防御 - 需求分析# A* o! p$ l. k9 W' f9 J8 ^
11-3 xsrf 防御 - 代码编写
, r5 M+ Q4 h# \) W$ m* }11-4 xsrf 防御 - demo 编写
5 r9 M( O" ]# n" s11-5 上传和下载的进度监控 需求分析+ 代码实现: `% O: c$ o+ B K* X: }
11-6 上传和下载的进度监控 demo 编写
3 i5 M% U8 A, m9 F. h. {* U11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写: k s1 l9 B. U* P# a
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写1 W+ y+ E. h1 b1 i( ^9 M$ q
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写3 v9 l# U7 W t! S: F+ }
11-10 baseURL 需求分析+ 代码编写 + demo编写3 U% v" O6 r6 _. \, R6 e1 ]
11-11 静态方法扩展 需求分析+ 代码编写 + demo编写# _+ U2 `0 K- l1 _- ?. q: P
( L* p4 ^: t2 i2 k第12章 ts-axios 单元测试【保障代码高质量】
9 r G# R' o* `' O2 X) N先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%: H6 D& w6 D! C* J
12-1 前言6 S/ Z5 N6 v8 A' Z" D8 e
12-2 Jest 的安装和配置 Jest 安装
8 U1 `: E. X9 i; f- G0 [12-3 辅助模块单元测试 准备工作
c: j- x9 K/ _5 S" C' Y7 E12-4 辅助模块单元测试 util 模块测试-
9 k$ F$ A* l) H: y12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
: C. Z* c/ `8 ] C) x( J4 i& a: S v7 `12-6 辅助模块单元测试 headers 模块测试9 u5 D( ~2 c6 t
12-7 辅助模块单元测试 url 模块测试
' }$ ?! X( E4 M12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
' f3 G5 H9 g; n) v1 W# j- k12-9 header 模块单元测试 测试代码编写# ~% c2 F1 z& ] s6 q
12-10 Axios 实例模块单元测试 测试代码编写
8 s0 G4 X, @5 T1 B# f* J12-11 拦截器模块单元测试 测试代码编写9 m, h# o$ Y) Z' L# O% T9 i* C9 U4 U
12-12 mergeConfig 模块单元测试 测试代码编写
2 C K) _! O, P) a/ x7 P6 f12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试# o1 U: Q* X, M' d
12-14 剩余模块单元测试 defaults 模块单元测试2 t6 P0 K9 R" W% @. Q& [, @
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
J1 s0 q1 B+ I12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试
$ ^, \, G0 L- I. ~# q# U' y% C12-17 剩余模块单元测试 补充未覆盖的代码测试
! b* b! S) A+ K I: n G# y, @
1 L1 ]' o- \( |第13章 ts-axios 部署发布【向社区分享你的项目】0 K9 {" _6 j/ O( T- S! @
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
0 T4 D* ], C5 w2 M! P4 K13-1 ts-axios 编译与发布 需求分析 + 编译和打包
# Y5 h- S9 @! J' n c( |13-2 ts-axios 编译与发布 自动化部署* \" }; \" Z6 D! H
13-3 ts-axios 编译与发布 运行部署脚本) f0 r- k* h' z, n6 p$ y3 {( W
13-4 ts-axios 库 在 TS 和 JS 项目中引用
% R) V0 }" i4 |6 _
. y) J" i8 j8 B/ S s第14章 课程总结【知识梳理，巩固加深】
0 J2 f3 f c U本次课程的整体回顾，总结学习的内容。
# }0 H b8 q: e14-1 课程总结 与回顾* B! E& g: {& o+ [7 x: \
; M+ |9 H; L; t7 b
1 m+ _1 v) J i〖下载地址〗0 _2 J* Z' R; ?: a6 x
! E C# _7 h: i. r2 \! _3 B
& Q$ o# _0 m# z4 z5 a
9 P5 y5 y t: H1 b/ k9 T1 _
|
|
[复制链接]
在 TS 和 JS 项目中引用