& R$ M% w5 F: w4 k V! X' ?
, f0 J2 v5 O) R0 y4 |) M" t* V
〖课程介绍〗- ?& H. S* A" k, X) I; y' Z6 ]
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
8 X( }. A O6 J7 B% k, y4 x" E' \$ r8 I1 k3 o
$ Q4 _1 x0 n. ]$ d2 x〖课程目录〗
' } W7 G( h: Q第1章 课程介绍【悄悄告诉你，一定要看，有福利】
8 M, R* D1 n% f! B5 Q介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。5 l; c) v7 X. k( W1 N; `
1-1 课程介绍 试看
, y, L. Q! k6 S
: ^/ Z& [: x8 g) P: |) w第2章 初识 Typescript【初次体验】% H2 y3 g) {5 r4 @* o+ s7 | `
教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
+ }! y9 ]1 N2 x" ~- C$ D$ }0 t2-1 安装 TypeScript
; V/ d6 h- B. I2-2 编写第一个 TypeScript 程序 试看! B# ~$ o' v) N% m( l
. q( Q4 f! O: B第3章 Typescript 类型系统【必备基础，牢固掌握】
x( c' Q g9 _1 d% g, S参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
5 h* I: i) z$ s9 L0 \+ o7 n3-1 基础类型（上）
( j( X0 v4 H, R* p9 X" Y" n0 n3-2 基础类型（下）7 a+ f, P! x9 z! k2 r! o+ C8 W
3-3 基础类型（注意版本报错问题）/ M, H0 y9 W6 B$ M b. M* g
3-4 变量声明 - var 声明6 V w `2 ~" n' C, N' @
3-5 变量声明 - let 声明/ a1 \; \! g" q! b6 C* y; ~% x7 D# q
3-6 变量声明 - const 声明
n" R! R% \/ ^! P3-7 变量声明 - 解构3 N2 Z2 Z: w5 H( u/ _! y
3-8 变量声明 - 展开+ o9 ?9 K+ u( G/ w
3-9 接口 - 接口初探
. m- j! {" n2 w3 S3-10 接口 - 可选属性+只读属性: t/ V4 r# I f4 d
3-11 接口 - 额外属性检查+函数类型+可索引的类型
7 l9 ~0 Y' p1 P8 g0 |, ~3-12 接口 -类类型+继承接口+混合类型+接口继承类$ U. F* t9 ?+ d: j) f( r3 `
3-13 类 - 基本示例+继承
+ ]* X9 R/ {( v' _) a3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符. d3 ~9 G2 q0 m5 T
3-15 类 - 存取器+ 静态属性6 J2 _) W# S& P) L% a, s
3-16 类 - 抽象类+ 高级技巧! B7 t7 W$ T; r, }3 r j. U( t7 B
3-17 函数 - 基本示例+ 函数类型6 q9 H/ F+ v* c6 V
3-18 函数 - 可选参数和默认参数! {+ Q# }: C. R r3 q
3-19 函数 - this+ 重载
7 ^2 [# d% E$ P# t; h9 F3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型: A9 C, O0 V3 f% h+ j. j
3-21 泛型 - 泛型类+泛型约束
& C- y" n* v( G9 R3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
3 r7 |6 y1 d3 A; ^( O7 e v3-23 高级类型 - 交叉类型
* I& v0 p$ z# z( d& K3-24 高级类型 - 联合类型
- X3 ^( ^2 [/ T$ U/ `. }7 B3-25 高级类型 - 类型保护6 r6 L+ @* s* ^) z3 w d; ~
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型4 [0 E X% s- b
# v5 I2 F0 s8 @" y, n4 [
第4章 ts-axios 项目构建【工欲善其事必先利其器】 u; V/ {1 c, s) B+ X
分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。% o. c/ O c1 |" Z! n% E9 [% j
4-1 需求分析, X6 q- r7 } v& N
4-2 初始化项目 - 创建代码仓库
5 e& o. n# n5 y0 ]' {1 K, G* J4-3 初始化项目 - TypeScript library starter2 q( P7 \) X# {( q- ~
4-4 初始化项目 - 关联远程分支
$ ]+ l; T, i7 @( z" Y8 {4-5 编写基础请求代码 - 创建入口文件0 L/ L4 x. V' S* K
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求& o' k1 E1 \3 j) F
4-7 编写基础请求代码 - demo 编写# H# y' ]9 [8 ^2 C% w) G* X! U- o& A
1 G3 h3 ` O' j/ t0 G
第5章 ts-axios 基础功能实现【核心流程】5 `; e" T! |6 e6 d, {6 N
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。: a( a! v; W% A. a! \6 m
5-1 处理请求 url 参数 - 需求分析) I; j% Y" m9 W6 D- S
5-2 处理请求 url 参数 - buildURL 函数实现
4 Y9 Y! s6 _5 ?. @5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
' _) y1 {% r+ ?* U5-4 处理请求 url 参数 - demo 编写
: G' F# j6 @. i( @, F- o. \) |6 G5-5 处理请求 body 数据 - 需求分析+ 实现 试看
- W8 S, ]5 l2 j% n: g4 Y5-6 处理请求 header - 需求分析# n+ I+ r1 Q2 F* L; |* Z
5-7 处理请求 header - processHeaders 函数实现
' @% e9 @- f R | B4 P8 M5-8 处理请求 header - 实现请求 header 处理逻辑" g7 k6 D% e9 K5 a4 D
5-9 处理请求 header - demo 编写
, R7 W' a7 q0 n; X( ]0 U4 A5-10 获取响应数据 - 需求分析+实现
+ `: M% i# g! Z/ B% V5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用. t7 q- ?) [0 P8 B$ z' k: t W
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用; ] m7 u s6 e2 u
: c# K& Z: t+ Y! Z* |第6章 ts-axios 异常情况处理【不可忽视的边界条件】
2 v3 l( F# y" T. C+ u% \5 Z; y, D处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。1 d8 H% v: d0 V* w- w
6-1 错误处理 - 需求分析6 |- x+ V7 l/ E! W8 b) p' Q
6-2 错误处理- 网络错误+超时错误+非200状态码+demo2 t! E4 X! M4 _
6-3 错误信息增强 - 需求分析
, @7 i8 l3 x4 b* U: x6-4 错误信息增强 - 创建 AxiosError 类
. |9 @7 F1 m T2 e/ v p% M6-5 错误信息增强 - createError 方法应用+ 导出类型定义# }* f3 X* R+ i+ ]( c
" ~7 Z/ t$ v8 i, a' g
第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
g7 v: n8 k- q4 K9 S4 s2 [把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。$ r, O9 K* B( n3 X
7-1 -1 扩展接口 - 需求分析
8 d% _& v$ Q5 v( j( G5 B+ J, v7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
; I X. T* W1 o4 `# p1 ^7-3 -3 扩展接口 - 混合对象实现+ demo 编写 h% l/ y" A' i- ~. ]
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写- a7 t( I5 W3 f v6 z% Z2 c
7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写$ \7 t1 @( u1 M X; x% P i; o w
+ q" I5 i# N6 m, W
第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】5 u% ]6 V. e! W" t/ f) p. V
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。% D4 U2 ?1 z7 m* K2 E9 ?
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
8 h1 P2 F! {4 M; _8-2 -2 拦截器的设计与实现 - 拦截器管理类实现" I* O5 d2 w6 k) J7 G
8-3 -3 拦截器的设计与实现 - 链式调用实现
; ?( `+ p2 Z# C% c8 n: }8-4 -4 拦截器的设计与实现 - demo 编写
+ u+ W, ]5 e" |6 b, c
( z- ~" J% b* x4 r: X& `4 }第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
1 T; h" A$ V, e" J* z, Y4 _0 j让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。; R$ k9 J# G1 |2 j- @
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
; G- e2 R( {: f* X; w- k& `; [) z9-2 合并配置的设计与实现 - 配置合并策略（上）5 z5 P \ L, Y" h* [& }. d
9-3 合并配置的设计与实现 - 配置合并策略（下）# J# }: a( o8 p& s% G9 D
9-4 合并配置的设计与实现 - flatten headers + demo 编写; n% j: c- e7 v
9-5 请求和响应配置化- 需求分析+ 修改默认配置# o# W) a+ j- f( J/ ^& k" q
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
% j6 ? [5 t/ h4 \% \9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
2 U1 Q; o @( ?5 h! l$ R9 `/ Y0 M( ]" J8 H7 |+ E- x
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
/ x1 u8 d" F; ]" `6 U+ M0 P: `4 X实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。- v' I0 [9 Q( N- I* |
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案. q# w3 v6 E5 C0 X3 c: I
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口6 i. V7 y" G/ q+ b; o k
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
+ N5 r( s: q$ g! a' B8 X10-4 -4 取消功能的设计和实现 - demo 编写# K N0 K4 o4 T$ @5 \! V
L9 b, \% E6 `
第11章 ts-axios 更多功能实现【锦上添花】
( s9 ^5 }! z0 Y7 k* u" `4 [实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。. A7 E$ p" q. J+ x7 y
11-1 withCredentials 需求分析&代码实现& demo 编写
' g3 I, `: F& E' B11-2 xsrf 防御 - 需求分析, G0 C) x, a S+ F: _, c9 C
11-3 xsrf 防御 - 代码编写( l1 c# l7 Y" ~% R2 g
11-4 xsrf 防御 - demo 编写6 e# p6 x0 v& C H! j3 d v. N
11-5 上传和下载的进度监控 需求分析+ 代码实现 f" H6 l$ s, o: Q a% n
11-6 上传和下载的进度监控 demo 编写/ z) }5 \" g! \, e
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写" l$ d" I2 f8 o5 M7 B$ n
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
4 E; | L' b& ?4 C( o1 ]1 a- ?11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
% ?# t* t+ r& u9 C! V11-10 baseURL 需求分析+ 代码编写 + demo编写
$ d Y2 _- C/ n9 F4 p' c, E6 j; `11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
! B0 t+ l2 S$ {- f0 `, t2 E3 J% f: A. X0 O! Y/ q) L# x- S
第12章 ts-axios 单元测试【保障代码高质量】
: P1 R2 C. I2 y0 l& j: T& z- L9 I- l先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%+ l7 b( w! S8 G+ ~+ Y- H" l
12-1 前言
) J! Y9 T6 [) ?3 k9 S12-2 Jest 的安装和配置 Jest 安装" Q: f: n1 h' k' ]
12-3 辅助模块单元测试 准备工作: h1 A6 p$ d+ R! {! W# P2 a
12-4 辅助模块单元测试 util 模块测试-/ w5 V$ ^$ f1 _, D( Q
12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
; U6 O/ t& A! O( G& N7 q. p12-6 辅助模块单元测试 headers 模块测试
) h4 Y k3 e7 p/ s12-7 辅助模块单元测试 url 模块测试" [' H; s' {3 i4 ] Y3 l8 E1 b
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
6 ?$ p$ T% o7 R! M' g. n- @12-9 header 模块单元测试 测试代码编写
; M5 n6 K% _9 c12-10 Axios 实例模块单元测试 测试代码编写
, |, T: e$ \+ Z' e) D12-11 拦截器模块单元测试 测试代码编写6 @! u' X, w3 [: ^& {* Y6 ~4 \% F3 R
12-12 mergeConfig 模块单元测试 测试代码编写
- l1 o8 L% V5 _12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
1 |% M: B @) p8 g12-14 剩余模块单元测试 defaults 模块单元测试
# F# c4 w9 ]0 Q) [4 J, P12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
: B& E. D/ T" e: U12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试 l! [6 g8 k+ R+ a+ X# c
12-17 剩余模块单元测试 补充未覆盖的代码测试
( o* z- [9 l# g9 V j3 l& @) I9 {( x a( {
第13章 ts-axios 部署发布【向社区分享你的项目】: f( ~: B+ T& X! J0 a+ a
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
) c: j3 p9 U3 D7 A- R4 a: S6 U. N13-1 ts-axios 编译与发布 需求分析 + 编译和打包: t; n4 W0 @& K+ ~
13-2 ts-axios 编译与发布 自动化部署
3 f3 `8 r0 G4 P& q. d) ^13-3 ts-axios 编译与发布 运行部署脚本
' z1 u8 |* e- P7 P; K+ [13-4 ts-axios 库 在 TS 和 JS 项目中引用 X& A* F5 ^6 z5 }4 N
" a) G+ N+ V2 b8 M1 f第14章 课程总结【知识梳理，巩固加深】
" g5 h6 ?: R; J! k- b本次课程的整体回顾，总结学习的内容。- p7 X& w$ V6 M( B! t
14-1 课程总结 与回顾
! B/ V3 [+ o. d$ m3 A
1 e% c o) [% z; I+ ^# V$ K. z [ y/ h+ z) T/ U- C. ^
〖下载地址〗- L+ [# q$ [$ a5 u" H4 R/ B% D
( G' e& l; w' Y" P4 ^+ P; P1 {! {6 K* R0 x: h
5 L. M; h' W8 t; Y `0 c$ n- ~5 M, O |
|
[复制链接]
在 TS 和 JS 项目中引用