* S w$ f3 G+ F7 r# K" N- I% d
2 N! B$ G9 O" O) f2 K
〖课程介绍〗
2 S. d% o. I* s e1 ^% A TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @$ |; _: h" v. @: O( \( k% U; a
, y4 x" E' \$ r8 I1 k3 o6 S# a1 B( ?# R! D
〖课程目录〗3 x5 w! Z" U2 g9 o
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
2 t W; W2 s% t2 _* J介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
" L# K7 W7 F) H1-1 课程介绍 试看
# |( Q7 }9 q) y2 ~* N' G* X* o) L; F# y( y
第2章 初识 Typescript【初次体验】+ L- u: h% N5 i- @
教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
! M9 k' B( I: f& k0 i2-1 安装 TypeScript
$ M% _ B) k% h9 A1 }2-2 编写第一个 TypeScript 程序 试看% w5 I3 J3 ^; I" M" N9 T# ^
7 z3 T6 N0 B' g
第3章 Typescript 类型系统【必备基础，牢固掌握】4 }8 b$ ]0 |# F9 O5 c: w" x% F! k
参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
3 K2 h8 B, L) r+ _( }* o0 ]3 e3-1 基础类型（上）' p; m$ p6 W2 c p
3-2 基础类型（下）
& v$ ~2 s7 o) D+ r. ~3-3 基础类型（注意版本报错问题）
! j7 ?$ T+ r0 F0 L5 F( ^" }7 s3-4 变量声明 - var 声明
7 o+ ^5 Z1 g3 i/ [( k3-5 变量声明 - let 声明
. l1 N: I. {1 Y) z" k3 E1 n/ q3-6 变量声明 - const 声明/ m I+ G& `, k. b$ N
3-7 变量声明 - 解构% a1 U- v* f/ J6 o; ^8 |( D- l
3-8 变量声明 - 展开
+ x5 v- ]2 U3 z6 a% o5 r0 w0 U3-9 接口 - 接口初探
% w! _/ A; V" ^0 D3-10 接口 - 可选属性+只读属性4 k) U! J9 O( F# q
3-11 接口 - 额外属性检查+函数类型+可索引的类型
' a B: S& A/ P3 L' G/ _/ L3-12 接口 -类类型+继承接口+混合类型+接口继承类
/ _1 y" P S* k( ]' K" p, D3-13 类 - 基本示例+继承
& l0 k* s& D" l1 _" z1 y5 ?3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符8 M5 m! J1 _! T, }# b+ f
3-15 类 - 存取器+ 静态属性
; s) k& b: r$ M1 f L! z L3-16 类 - 抽象类+ 高级技巧
$ Y0 c! Q5 K4 b& ]3-17 函数 - 基本示例+ 函数类型
% A$ u$ f5 R+ t9 J. _' O5 o0 r3-18 函数 - 可选参数和默认参数
. i' }' p$ F* n9 T8 {2 Y3-19 函数 - this+ 重载
% w5 M& P" |+ p% g3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型6 y: T- h& ?# d9 s
3-21 泛型 - 泛型类+泛型约束
* }% C; y$ f* j8 ~* z3 U3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
n4 a$ Y8 G4 k8 X4 G3-23 高级类型 - 交叉类型4 Y; W' _) F( B$ t% c
3-24 高级类型 - 联合类型9 Q& w( d. C6 \+ w ~9 u
3-25 高级类型 - 类型保护0 _& _9 ?2 b. k8 p
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
' |1 C! x( d- C }$ X; Z3 d' S- l8 w2 H: F3 K, T! n
第4章 ts-axios 项目构建【工欲善其事必先利其器】1 e1 [$ ?0 ~4 f* u. M
分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
( K) Y% H5 z9 }: O3 \( Q4-1 需求分析7 i. m" v# K) w5 r% A7 S! f! i; d
4-2 初始化项目 - 创建代码仓库
; V+ }, \) n5 }# F5 w4 {) ?! W4-3 初始化项目 - TypeScript library starter
7 J B3 @! D* @5 Y1 R- r4-4 初始化项目 - 关联远程分支
# O; I$ S& d/ A& O4-5 编写基础请求代码 - 创建入口文件
1 E$ g3 ?+ d3 n! F8 Q4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
C# c7 ]; t0 Y4-7 编写基础请求代码 - demo 编写; N, @4 Q: K* s+ v6 y! l- C# H' b
1 h3 v5 u5 H7 b! T8 o
第5章 ts-axios 基础功能实现【核心流程】
' w& Q/ {' U$ M) `4 _0 q4 v实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
8 N# J- M3 h; a; k5-1 处理请求 url 参数 - 需求分析! ^* G2 k. e9 Q: J) m7 M' J
5-2 处理请求 url 参数 - buildURL 函数实现& ?; Y( z5 a1 H! R8 l
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑0 S u; a9 \9 `9 F& d
5-4 处理请求 url 参数 - demo 编写
1 q O4 v6 p8 U+ j3 p F5-5 处理请求 body 数据 - 需求分析+ 实现 试看
9 J; s ~7 y: x* H7 L5-6 处理请求 header - 需求分析
; S) N' c: O H: X0 d" o1 m/ [5-7 处理请求 header - processHeaders 函数实现4 g8 D D# E; j( @* F- o
5-8 处理请求 header - 实现请求 header 处理逻辑
( G" H' x2 X/ e- w5-9 处理请求 header - demo 编写4 q4 d3 c; g1 `4 f
5-10 获取响应数据 - 需求分析+实现
' G0 I. x% m/ g6 g. p3 N9 H5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用) `, i/ E$ G) Y6 `
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用" X B( q* J' N$ M! m/ f# {
( m- `1 l/ N, J1 V& X3 x" g
第6章 ts-axios 异常情况处理【不可忽视的边界条件】
% R3 ?9 S; W% ^( h- e处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。1 x4 t% i' k- q2 _3 o" J- N
6-1 错误处理 - 需求分析
7 d* k, Y' G" [6-2 错误处理- 网络错误+超时错误+非200状态码+demo
3 C/ i. o7 \8 r6-3 错误信息增强 - 需求分析
6 O1 H# g" P2 S5 x# _% @6 T6-4 错误信息增强 - 创建 AxiosError 类% H7 w% a: B! G' Y, Q6 O8 Z
6-5 错误信息增强 - createError 方法应用+ 导出类型定义! Y, m0 b. `( }$ p' C9 \
. {/ q2 O7 n+ O第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】; X) [9 l( j; B/ l
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。9 b0 r# ~/ u) Y, e- t# }7 B
7-1 -1 扩展接口 - 需求分析
$ f. E7 U( b2 {" B$ |7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类7 L( l9 X5 T% h. Y
7-3 -3 扩展接口 - 混合对象实现+ demo 编写* h5 c0 y. w. O2 Q; I
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写8 S; H/ n% t, r
7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写9 `# o2 c# |5 M7 f, R: E) \+ w1 C
7 q$ ]& E N& A8 T& x第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】: Z+ A3 k( e: l L
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
5 _9 l5 U3 Z6 p& j2 d8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计 o5 }6 ]7 u& r& ^& `- O6 ^& [
8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
Y5 e# @$ j9 M9 u4 X8-3 -3 拦截器的设计与实现 - 链式调用实现
& V- ]6 M6 Z( ], m8-4 -4 拦截器的设计与实现 - demo 编写( l, Q% m3 O2 [4 Y
0 h% d$ c. a7 p! q第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
& f9 Y% ^) X0 D9 K/ D& |让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。+ m( S' x. K6 q7 t
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
; j( k1 A6 A5 X& M2 S9-2 合并配置的设计与实现 - 配置合并策略（上）, ~. I6 P6 q! n, @
9-3 合并配置的设计与实现 - 配置合并策略（下）
[6 i/ C* F2 L3 R3 k# N9-4 合并配置的设计与实现 - flatten headers + demo 编写
6 L% O: @9 R4 _0 f) B6 O# Q% u9-5 请求和响应配置化- 需求分析+ 修改默认配置
O3 W1 W6 s5 F$ Z7 I7 C. x9-6 请求和响应配置化- transform 逻辑重构 + demo 编写' Y4 h( V$ J3 @
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
$ Z! F/ S& s1 j& ?2 ?+ A8 Q
2 `& O- a' t2 B4 d1 p5 b. j第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
1 v: _' I* E! m% }! ~6 k2 ^实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。
; n: W3 e+ ?1 L9 K2 B6 Q t10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
" E. b7 R% }! m% C) h! Z$ H10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口 ~7 L$ n$ H% \
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现5 @. w9 o: [- X4 `- L% J/ }9 y
10-4 -4 取消功能的设计和实现 - demo 编写8 n' x& G7 E- Y# D! {
1 J/ @1 C. H( U1 r+ z5 a7 r1 C5 j第11章 ts-axios 更多功能实现【锦上添花】7 A/ c- k2 A! u0 Y: `1 `
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
( I, x. t+ b" @11-1 withCredentials 需求分析&代码实现& demo 编写! G( {3 W3 E5 ?
11-2 xsrf 防御 - 需求分析2 M) B2 w' }0 O2 u
11-3 xsrf 防御 - 代码编写- v: _, e% _+ c) r% F; |
11-4 xsrf 防御 - demo 编写. j5 o4 I; U2 Q& x" F+ _
11-5 上传和下载的进度监控 需求分析+ 代码实现. l( z% }' Y2 V1 S+ V' x
11-6 上传和下载的进度监控 demo 编写
8 O3 o$ l5 M3 g/ g7 i$ k11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
) c y& g# _( I# e# z( m11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
' e5 |5 u/ u) @, d4 |( Y11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
0 }8 ^5 c& u: i11-10 baseURL 需求分析+ 代码编写 + demo编写
& u, Q2 N# _" A7 R11-11 静态方法扩展 需求分析+ 代码编写 + demo编写" Q/ r: w# K8 Z* Z3 F/ W8 K
0 l4 Y6 W# {$ Q' e
第12章 ts-axios 单元测试【保障代码高质量】
7 f {7 T! Y8 X o4 Z先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%% L2 _, k4 B2 d5 [& |- U
12-1 前言* w7 p* P/ H/ ^/ `
12-2 Jest 的安装和配置 Jest 安装
! [" x2 u# \/ A. V12-3 辅助模块单元测试 准备工作
* g8 F6 H3 k! J. `12-4 辅助模块单元测试 util 模块测试-
8 ^; R7 t0 g( G/ B# o12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试# ~6 U! { ^* I/ M9 ^, f- E9 v
12-6 辅助模块单元测试 headers 模块测试5 c L- S1 @" [7 a+ \: S# `
12-7 辅助模块单元测试 url 模块测试* r" i% V# p- j2 W
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
0 X! \3 V. d& P( j- P" \: n: a6 B. H12-9 header 模块单元测试 测试代码编写# l, X o3 V0 i3 j9 E
12-10 Axios 实例模块单元测试 测试代码编写
; k! R- C0 ^9 c+ W. ~4 K" H12-11 拦截器模块单元测试 测试代码编写
" z1 X+ V" r: N8 ~12-12 mergeConfig 模块单元测试 测试代码编写
7 J* D& {. V* K, Z0 M12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试$ l+ m' [. y8 c& }4 ]
12-14 剩余模块单元测试 defaults 模块单元测试
' S4 u% |; y$ {. N+ G K12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
+ Q; _& a6 n; H# X u& z5 t/ S12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试; U1 [2 q2 N: F" w
12-17 剩余模块单元测试 补充未覆盖的代码测试
' j' Z& R, y* @! a6 }, M
& [2 Z. f7 w; \) L* S0 c第13章 ts-axios 部署发布【向社区分享你的项目】1 j, L( I& p& Y9 x- ^
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。: [- o/ @ e3 Y; K3 T1 h
13-1 ts-axios 编译与发布 需求分析 + 编译和打包3 F3 C* \2 |- |9 @: _; e, ^
13-2 ts-axios 编译与发布 自动化部署: ?: i) g, o, _
13-3 ts-axios 编译与发布 运行部署脚本
/ j: P! Q6 U/ s: Q# ^! ]1 r1 Z# E1 i- l' L/ d13-4 ts-axios 库 在 TS 和 JS 项目中引用- p) t) V8 |2 W- O% {9 Y+ w7 F
$ i+ H5 ^0 Y! s& {
第14章 课程总结【知识梳理，巩固加深】% N7 G# @" l$ f6 [: w) E4 p; f
本次课程的整体回顾，总结学习的内容。
/ ~) }$ r0 b ~) x4 n14-1 课程总结 与回顾- Y3 ~8 r/ t( h* r( V
- R2 W" t. s: f& @1 H# I" X+ g7 U5 d/ ~, k
〖下载地址〗- _6 J( J8 K+ v: K: I5 A
, ^% v* P9 @4 W. Z% B$ U6 ^
; ?, d& d5 c; g# l! O& S
9 l& B$ G/ y3 A5 ]- M2 c: z |
|
[复制链接]
在 TS 和 JS 项目中引用