7 e! E% g3 R) d" |, Z' i7 d! m
5 @; ~3 v/ k0 l9 K, O/ s6 A9 y〖课程介绍〗
$ r" x3 e! [0 M* t0 `& ~ TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
3 P) u; Q- `) B! p, y4 x" E' \$ r8 I1 k3 o5 X" H; m5 Q3 Z* V
〖课程目录〗
7 B. m( y: {2 h6 Y1 |第1章 课程介绍【悄悄告诉你，一定要看，有福利】6 A- T$ p+ I2 r8 r
介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
; a+ k o7 \4 F t1-1 课程介绍 试看
( [3 s; W! ~, M2 i9 p q7 Q
! J# y7 @0 Z3 y/ y2 E第2章 初识 Typescript【初次体验】
) i, w$ [ H# h, q教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。: J, a$ X- q. L" E1 M9 ?% Q, W
2-1 安装 TypeScript2 l$ w0 Y4 C4 j( t# ]( ~
2-2 编写第一个 TypeScript 程序 试看9 z0 [2 X( X( d) F* H
9 H) x) n, ?1 }第3章 Typescript 类型系统【必备基础，牢固掌握】
0 s2 D; K/ n f, k3 H) ?, o; B( T- ~4 ]# i参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。& Y7 d- g/ u2 u; A+ z, x
3-1 基础类型（上）" o. x7 \! X" Y* J
3-2 基础类型（下）
( z e* {, c7 R" p3-3 基础类型（注意版本报错问题）
; a0 v* V% [& A+ Z3-4 变量声明 - var 声明* a+ _/ F+ }2 O$ Z; l
3-5 变量声明 - let 声明
& [# g1 W( R& a+ W1 K3 O3-6 变量声明 - const 声明2 H5 A1 L( R1 W0 j' s* C
3-7 变量声明 - 解构
4 i5 d+ c7 C: W" [3 R8 w' h& `! \3-8 变量声明 - 展开
1 K/ Z' b% k3 C- K+ `; Y1 I% F3-9 接口 - 接口初探' J7 d* Q# x9 Q% |2 \( U/ A
3-10 接口 - 可选属性+只读属性
+ {: P* }5 n( b3 P3-11 接口 - 额外属性检查+函数类型+可索引的类型
1 z5 _" E- `( X2 d8 f3-12 接口 -类类型+继承接口+混合类型+接口继承类0 c* U. j: z. z% q1 M$ O
3-13 类 - 基本示例+继承7 T5 p% n0 D1 K
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
& p8 p9 F: ^$ U! t' w4 M1 \3-15 类 - 存取器+ 静态属性6 m( r, T" u9 S5 g( X3 S
3-16 类 - 抽象类+ 高级技巧
* D" N/ \1 Z, g' l! q3-17 函数 - 基本示例+ 函数类型
2 e0 f. R; b* o2 z2 D3-18 函数 - 可选参数和默认参数
7 f3 Q" R' k9 W# `5 M, W3-19 函数 - this+ 重载
, W& X, `7 ^/ E+ p5 P3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
0 J1 O/ T# w3 A g3 l) x3-21 泛型 - 泛型类+泛型约束3 G2 y: s. }# T C; [9 w
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
1 o; Y+ T; k& I% e+ \3-23 高级类型 - 交叉类型
. g5 x& G6 r& z6 ]3-24 高级类型 - 联合类型$ _' _5 j% C: j- o, T4 N3 C4 H' g8 h N
3-25 高级类型 - 类型保护
2 o: B, b& }4 D/ g) Z$ I5 _1 k5 Y3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
7 m- T' a" r6 z9 n8 N2 B5 S+ [0 V, U; ~6 u
第4章 ts-axios 项目构建【工欲善其事必先利其器】+ g' x* ~$ I0 ~5 |+ O
分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
+ w8 M8 N* H( b' `4-1 需求分析; V# @7 e" z! W4 B
4-2 初始化项目 - 创建代码仓库; Q- Q, j' d/ l8 [6 Z! ?" w
4-3 初始化项目 - TypeScript library starter6 t1 @4 o- r' u, A# A
4-4 初始化项目 - 关联远程分支
8 t& G! [, ?3 K/ S$ _ _4-5 编写基础请求代码 - 创建入口文件
( G3 s x2 {( f) y9 Y5 B6 u4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求' h0 @3 q' a# ]% _' r( f8 _
4-7 编写基础请求代码 - demo 编写
5 @6 h' s+ Z% ~/ Y5 ^
2 F8 f9 Q* f0 r/ e9 [% w第5章 ts-axios 基础功能实现【核心流程】
. W- d3 E0 F) \8 |实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
! ]: t$ U1 J! } q" o5-1 处理请求 url 参数 - 需求分析( O7 E3 X! W5 t' V
5-2 处理请求 url 参数 - buildURL 函数实现# K9 C; C9 l8 e/ x3 l. W
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑1 U$ A: @" m) o8 i3 R- Y" T% b
5-4 处理请求 url 参数 - demo 编写8 ~0 {' p% b1 A5 D! h
5-5 处理请求 body 数据 - 需求分析+ 实现 试看
' ^0 x- G# h. U* S7 S2 Y" O5-6 处理请求 header - 需求分析# @- Y3 b! f, x4 U7 {7 f
5-7 处理请求 header - processHeaders 函数实现, A' x8 s4 }% T2 o. ]7 r1 G$ p* h$ c) F
5-8 处理请求 header - 实现请求 header 处理逻辑
: b$ D' ^, r$ ?% ~, R5-9 处理请求 header - demo 编写
, v b* |$ o" s) S6 a, C) h1 z3 e5-10 获取响应数据 - 需求分析+实现
* o3 M! I8 G1 n; O% `9 i( k5 {- f5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用
9 G+ E: R& o8 o! }; [9 A: o5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
# F) |2 ^" i9 ~$ O$ s7 B4 O" Q/ G* ^* s+ N+ w
第6章 ts-axios 异常情况处理【不可忽视的边界条件】
8 L: T2 U$ |% B; N处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
0 r6 p, x% o0 I6-1 错误处理 - 需求分析
: n, |4 O: ^" u2 ` n6-2 错误处理- 网络错误+超时错误+非200状态码+demo# c" e: F- Z' e6 U3 s4 ]
6-3 错误信息增强 - 需求分析% M4 I( c' |0 b2 k9 @ }
6-4 错误信息增强 - 创建 AxiosError 类
5 A( ]7 K1 C, P/ f' E6-5 错误信息增强 - createError 方法应用+ 导出类型定义
4 N2 S: X7 k8 F0 G, }& k4 D* n
; i. R- E# N/ o+ i第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
$ H( f V w/ Y, f9 _! @把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。0 ^% n. c. M, c! Z9 z2 X
7-1 -1 扩展接口 - 需求分析' e, b& w" d" n
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类7 G: B, u2 K. M8 _
7-3 -3 扩展接口 - 混合对象实现+ demo 编写2 D4 H6 ^ _4 S/ Z" @& i( L
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
' y J8 o. X5 J7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写
! i: u) g8 v2 L+ n0 u: K/ g! F
1 k e# N/ K( T: z8 r+ k第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
1 d: m0 v" D6 u0 a8 J: E: F% t实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。7 _ \" K9 N3 ~
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
# u* L8 b5 Q! u! m8-2 -2 拦截器的设计与实现 - 拦截器管理类实现$ ?+ B3 m! Y* F) V
8-3 -3 拦截器的设计与实现 - 链式调用实现# G( R0 g6 T4 i# g+ j
8-4 -4 拦截器的设计与实现 - demo 编写5 M; r4 Y0 i, G8 A" N& c0 s Z4 e
0 a# o5 b5 P: P& n5 y% e5 }% W第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】) H" H: L2 r+ Z; a. s7 D
让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。" v! p) W' b0 Z- d5 ?3 E4 r. Q
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
( Q, |( k; I2 R5 F+ u9-2 合并配置的设计与实现 - 配置合并策略（上）
! X$ i6 v3 M8 o, B) S4 y* s9-3 合并配置的设计与实现 - 配置合并策略（下）* }3 D* m7 x5 U: c; p' Z
9-4 合并配置的设计与实现 - flatten headers + demo 编写# f5 i; A' G3 D1 [( X) n
9-5 请求和响应配置化- 需求分析+ 修改默认配置! Z9 ~' g2 g( F% |: E
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
0 Y8 k. z8 H$ L& t" f9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
+ b/ a+ R) [; V' A
% t' L! F1 m7 w* c9 P4 Y第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】: B, _( m. d: g4 Y+ t
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。7 ]1 v G! d) X* R- { L
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案% H$ p$ |4 Y% x) o1 c7 {& b
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口) P: ]8 @ m( }7 q7 _# U* [
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现0 j- a3 [7 H2 x$ y( l
10-4 -4 取消功能的设计和实现 - demo 编写
. p3 b4 H* ?9 [# o d# K% R( X2 z, e! I
第11章 ts-axios 更多功能实现【锦上添花】! [* v7 _' p% p. F
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
" x9 O/ e/ _$ d3 M8 |8 D. G11-1 withCredentials 需求分析&代码实现& demo 编写. }0 A8 F) M1 `% W/ o
11-2 xsrf 防御 - 需求分析
4 U5 B; d9 N' Q$ [% f11-3 xsrf 防御 - 代码编写8 D. X- w% P; ?
11-4 xsrf 防御 - demo 编写
" D- M; x0 G2 X5 u11-5 上传和下载的进度监控 需求分析+ 代码实现: K3 M9 t& v# o! w
11-6 上传和下载的进度监控 demo 编写
; o# G! N/ h6 d- L" }9 ]11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
, P+ y ^' E3 g. U% W E. f11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
3 t0 _( l( }' B$ B' b4 B: j8 I- G11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写& t/ f) D* u5 {$ m$ |0 O
11-10 baseURL 需求分析+ 代码编写 + demo编写
: B/ u1 ? H8 x0 }" o- A5 _- Q11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
" b: I9 T6 N7 x% ] X
5 p+ O x1 o7 B* H7 r7 D' e第12章 ts-axios 单元测试【保障代码高质量】" j- ], v# L3 {* o5 P( C
先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
" o$ L. t3 ?7 y% i3 q5 W12-1 前言
. q& U S) [- g) E( U/ R7 r12-2 Jest 的安装和配置 Jest 安装
( T/ {: p, t+ a1 p7 ]) Y; k* x12-3 辅助模块单元测试 准备工作: k' R! ]- S9 E4 c* X# \
12-4 辅助模块单元测试 util 模块测试-
/ J9 p# `6 H: k- R+ F* E* t' O* \! a12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
6 n. G1 ]' }. w p12-6 辅助模块单元测试 headers 模块测试
4 j& c: q4 d2 G12-7 辅助模块单元测试 url 模块测试
3 ~- ]- Z( @' H12-8 请求模块单元测试 jasmine-ajax + 测试代码编写8 w _! R2 ^' B& t2 R7 }6 A
12-9 header 模块单元测试 测试代码编写
# L5 g" c0 m: i& G8 b9 V( y' G12-10 Axios 实例模块单元测试 测试代码编写8 e" X/ [: M0 T9 T( [; D
12-11 拦截器模块单元测试 测试代码编写
! X0 M& _- ~ {+ _12-12 mergeConfig 模块单元测试 测试代码编写# c, J2 G; s. I3 X. ]. n, _# C
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
) t% M# p) H" K% M, ?0 L12-14 剩余模块单元测试 defaults 模块单元测试! n& g( p7 T+ o& _
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
O/ j" w' B& M8 z, q9 a8 U12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试6 x. e4 p5 ^3 p% S
12-17 剩余模块单元测试 补充未覆盖的代码测试' @% W2 c) d& n. `
& Y* m! Z |/ s- ?7 x
第13章 ts-axios 部署发布【向社区分享你的项目】7 f; t! ? @$ ^, J: b
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。% `$ K& f" p* l
13-1 ts-axios 编译与发布 需求分析 + 编译和打包0 L- _' V$ F( i* J- ~6 |
13-2 ts-axios 编译与发布 自动化部署
8 w4 y9 |, h( Q! H" w& m; @, h0 b; ^5 V2 _13-3 ts-axios 编译与发布 运行部署脚本
" ^8 J) e/ r! x13-4 ts-axios 库 在 TS 和 JS 项目中引用
; F9 w% c3 G- A4 x3 j. r) B# k
h9 y4 W3 I8 `% {6 Y% ^% p第14章 课程总结【知识梳理，巩固加深】
/ c) K: h7 \1 w I( i本次课程的整体回顾，总结学习的内容。
8 C( d& j7 p3 Y4 s+ i7 K) p14-1 课程总结 与回顾5 @7 I' d' J% `" N: @2 g
R I. l* p! i1 @1 H, q9 p/ p5 j* G+ H% V
〖下载地址〗2 M" x: T0 U7 E# T6 k w! `' l
3 B T2 |! z. ~8 @) J! L
( q# \' m1 s1 m
1 U. s/ _. N& i9 w" e |
|
[复制链接]
在 TS 和 JS 项目中引用