& [+ r* @, m2 w7 {8 T }
: X: {- ~7 `9 z" K6 u* y+ W" g
〖课程介绍〗
+ L0 ^' s5 x5 ], ] TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
; o) o) @$ h+ S/ Y3 q, y4 x" E' \$ r8 I1 k3 o
# {, k% Z! e6 M+ D〖课程目录〗$ y4 U6 T o3 T+ {
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
" u; V Y& }8 x介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。 i8 m5 W) a6 i6 ]: q3 u& p# `# v
1-1 课程介绍 试看2 E9 R: A8 T) k& s
- L. c) M) Y( z0 y0 z% S1 m' n第2章 初识 Typescript【初次体验】! C/ h/ B6 L2 a0 z0 x% V# l1 @' v
教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
Z0 c: [' N5 |: o) N$ H1 i. d1 [" G2-1 安装 TypeScript# n# j3 r; |7 q# b. s3 w
2-2 编写第一个 TypeScript 程序 试看
" L% d# a5 \& e5 I
1 W6 r, t. B* C: n# }4 `第3章 Typescript 类型系统【必备基础，牢固掌握】
. L' N3 u, F6 |$ l$ X U参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
$ t4 U8 C" Q0 ]) B3-1 基础类型（上）$ c0 o4 n! A* A' o
3-2 基础类型（下）
2 n' T6 {, v0 e; p- T* l5 h3-3 基础类型（注意版本报错问题）
# H' i+ V3 ^4 g! [3-4 变量声明 - var 声明0 a: P2 M- j0 `. c- g- W3 d( b
3-5 变量声明 - let 声明* i0 [% Z' u' ` n$ p$ Z
3-6 变量声明 - const 声明
. x! H ?& N/ p$ z8 W3-7 变量声明 - 解构
! v# i, L+ L) |; R7 Z, T# K. {2 J3-8 变量声明 - 展开4 n9 w/ i4 W* [- A, S: ?
3-9 接口 - 接口初探. F$ v7 z/ y8 R/ w
3-10 接口 - 可选属性+只读属性
2 X1 N0 c7 h- u- }/ k3-11 接口 - 额外属性检查+函数类型+可索引的类型2 ~4 z! O" h2 l# b. _! Q0 X- h
3-12 接口 -类类型+继承接口+混合类型+接口继承类
0 p0 G0 U, ]- {" I3-13 类 - 基本示例+继承
, f1 z$ t7 Q- v3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符7 S$ I' N- Q5 C m( d
3-15 类 - 存取器+ 静态属性
* U) u& i# I! Y/ C; W* Q3-16 类 - 抽象类+ 高级技巧" i) X: F/ {, I5 @- N9 i
3-17 函数 - 基本示例+ 函数类型
( f4 _' ~# t( u3-18 函数 - 可选参数和默认参数# K+ {$ T1 b' E3 D. v; ?
3-19 函数 - this+ 重载- _) E/ `4 \1 T4 u3 d n, `
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
3 a2 s% J d. E1 w' h" ]3-21 泛型 - 泛型类+泛型约束2 ]" m) U9 q! G& j4 Y j Q
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型9 v# ]" E9 R- p' m0 ~5 S5 `
3-23 高级类型 - 交叉类型
( Z6 R& l6 O6 p: C. c' Y3-24 高级类型 - 联合类型* M) m+ l9 k4 ]" x' `
3-25 高级类型 - 类型保护. r3 ~% Y# [1 E2 F! O$ x% f( J
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型) y: ?" E; K5 ]9 x9 P* y; `* y
0 e/ j7 b" G% Q* C1 w0 t, G
第4章 ts-axios 项目构建【工欲善其事必先利其器】
" m; K5 V7 \( G( F分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
5 Q m i. a7 r+ J4-1 需求分析
) S7 t2 a& ]6 I/ A& m4-2 初始化项目 - 创建代码仓库+ v: C; K) Q0 I; a+ t- j0 y6 a8 x
4-3 初始化项目 - TypeScript library starter
7 C" ~6 X- f2 t4-4 初始化项目 - 关联远程分支 h& N! H5 O" \3 R1 u a
4-5 编写基础请求代码 - 创建入口文件+ ?1 ]4 L; ~- G8 J- [7 p
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求4 t4 ^! o$ U. S2 Z" T
4-7 编写基础请求代码 - demo 编写
& r4 d- u1 L! [/ X) z5 q
1 P" q: G7 Z+ w" |2 |第5章 ts-axios 基础功能实现【核心流程】4 a. ]6 B. R: A3 S
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
2 g5 f4 ^: @/ k, ~- [2 j3 y5 z5-1 处理请求 url 参数 - 需求分析
% h) D1 @) P+ e" [2 u1 p+ C' I) M5-2 处理请求 url 参数 - buildURL 函数实现& y7 T& R' A. G) i' [, z
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
2 R* W! O* O- Z' A; T, _. j5-4 处理请求 url 参数 - demo 编写! P% m3 Q' Q- X5 Q0 _
5-5 处理请求 body 数据 - 需求分析+ 实现 试看
" ]4 w9 q a" ]. F4 \8 M9 j$ D5-6 处理请求 header - 需求分析7 |6 q4 h/ ~$ Q- k9 e
5-7 处理请求 header - processHeaders 函数实现
3 ^+ A% R* S2 u4 S6 j5-8 处理请求 header - 实现请求 header 处理逻辑5 l+ M& n1 ^9 ]8 N* r7 K' X- v. M& [
5-9 处理请求 header - demo 编写
0 y0 S$ G5 m, J$ f5-10 获取响应数据 - 需求分析+实现
0 g1 m) W k8 Z5 T6 m5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用6 c- x( R' _. J* M/ z f
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
" M! H- p3 d% }$ X
. ~8 ]& N: h" O E" Y第6章 ts-axios 异常情况处理【不可忽视的边界条件】' c# E+ M9 I& A
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
1 t) X$ o, g5 r o: s6-1 错误处理 - 需求分析
8 u2 h6 Q& h+ L7 |- |8 a. o( S6-2 错误处理- 网络错误+超时错误+非200状态码+demo# O" z- O7 O3 J2 J( W, ^6 M" [
6-3 错误信息增强 - 需求分析* i' r5 f0 |. A2 c5 o, X
6-4 错误信息增强 - 创建 AxiosError 类
' C/ ~8 S1 S2 u$ v) Y0 d+ W6-5 错误信息增强 - createError 方法应用+ 导出类型定义
5 x- d5 c) \# j7 I( r, v/ o' O) O3 T$ A. I
第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
9 X% ?. S+ Q! j( g2 Y! U; M: f/ D把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
! g, T, Y! V7 f8 f7-1 -1 扩展接口 - 需求分析% B5 U3 C' R8 S- \: Z
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
( a7 o" T" ~. F7-3 -3 扩展接口 - 混合对象实现+ demo 编写9 J# A7 q- N* o$ ~$ m9 \
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
3 {% H3 ]: w8 W6 U! i7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写
6 x+ G! M; u2 V0 {/ l! b, Z9 L
& A) V/ j# I3 B, t1 \1 z0 M第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
6 c5 o0 g+ K" Z实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
" m7 _0 y6 `! }# L, j; s8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
O$ F" }# R4 I5 Q! E/ K8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
. I* n* `+ g+ C q8-3 -3 拦截器的设计与实现 - 链式调用实现
# h6 i7 m0 V* F( z* X- q0 D7 W( r8-4 -4 拦截器的设计与实现 - demo 编写
' t2 l" I% _3 t" s" F* l/ U
3 k8 W. D N9 t6 g; P* S( H第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
* q- ~0 i# f; F$ C" g! v9 j让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。: x* l! I7 A' |/ `+ p2 k* ^+ S2 J
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
$ @, c. |5 e+ ]' K) D/ L9-2 合并配置的设计与实现 - 配置合并策略（上）
+ g/ v3 O/ K1 N T# e; _+ s9-3 合并配置的设计与实现 - 配置合并策略（下）
- h" `0 c1 X8 f9-4 合并配置的设计与实现 - flatten headers + demo 编写
: ~, K) l, A2 _! z4 {9-5 请求和响应配置化- 需求分析+ 修改默认配置" N" W( Z! \9 X, \6 W
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写( f" v% P: _! g4 y. u+ Q* U: O
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
3 q: X; R- ^$ d3 ~
; ^2 a+ p3 U7 |+ N o O9 E# s第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
- G0 h( d: _- Y实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。$ ]1 i) G+ y$ j. X
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
$ @( @9 Y* D( F8 w. ?3 P10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口' [7 x- Z, k3 Z
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
, o6 h# D5 _* m/ C- e( T, w m10-4 -4 取消功能的设计和实现 - demo 编写
8 q8 O4 u1 |* V. b2 n( ` I8 h" d5 k" f/ T+ j0 ~
第11章 ts-axios 更多功能实现【锦上添花】+ J, j1 R/ X H1 l
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
8 v6 a# a6 u9 e& h9 P11-1 withCredentials 需求分析&代码实现& demo 编写* ]1 i9 q' P$ h, |
11-2 xsrf 防御 - 需求分析
( H. w+ M1 h* z2 x+ s11-3 xsrf 防御 - 代码编写, C8 C5 k6 ^# @, Q
11-4 xsrf 防御 - demo 编写
& Q. h8 p8 S2 {8 N11-5 上传和下载的进度监控 需求分析+ 代码实现
# s; Y2 F3 c0 J' M11-6 上传和下载的进度监控 demo 编写
( o4 \, Z# a0 m5 `" f* ^6 R" q+ n11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
3 R- V/ Z5 X' i11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
! I8 d! T- C$ \% B3 R: f6 T11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
2 @ c0 Z& f- `11-10 baseURL 需求分析+ 代码编写 + demo编写
! ~; E: q) O* r) [7 D11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
, ]7 x0 l1 I/ e! V1 o) h! g$ M9 h U: f! V. J3 K, z) \
第12章 ts-axios 单元测试【保障代码高质量】
# [: y1 b; l" L0 H- s4 J; K先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
& @# y4 `) H; @- ?4 T! \2 f12-1 前言. B# h# |. j: q2 t9 ~
12-2 Jest 的安装和配置 Jest 安装
0 S" h. q k/ k3 j& Z5 Z12-3 辅助模块单元测试 准备工作
3 k8 X+ n+ r; p( _2 W12-4 辅助模块单元测试 util 模块测试-" ~( x& d5 j% W6 j! C! Z: S3 f5 ^5 q5 m: a! j
12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试' d) L! ?, g' _ O( `6 t h
12-6 辅助模块单元测试 headers 模块测试9 C& J7 d& {; S: i9 A. {
12-7 辅助模块单元测试 url 模块测试1 V8 Q( K8 S, Q i+ M- v- e8 p
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
0 L; H# y; {9 T3 W12-9 header 模块单元测试 测试代码编写
( e1 e" J h v5 ]8 b+ f12-10 Axios 实例模块单元测试 测试代码编写
( b# z$ K; P6 C# B. Q12-11 拦截器模块单元测试 测试代码编写+ a4 C+ a, O$ `" w
12-12 mergeConfig 模块单元测试 测试代码编写, f+ { D5 ?! }" Z- x
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
8 h8 O" i% x( y% s K2 O12-14 剩余模块单元测试 defaults 模块单元测试
' [! v3 \0 b1 Q. m) V7 p# }, W12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试) ]# D% g+ {$ s# V
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试
1 E1 ?4 u% {5 c: M q12-17 剩余模块单元测试 补充未覆盖的代码测试
- r, E) ~$ N5 q; w" I% G i' L1 l
1 K8 A Z: A+ N4 F" z" Y9 w第13章 ts-axios 部署发布【向社区分享你的项目】' p# z# S0 W2 F; x& {, F
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
% R7 d/ r9 _) W) Y) d) @: |, V13-1 ts-axios 编译与发布 需求分析 + 编译和打包
8 K4 o/ }4 F& p$ O6 u13-2 ts-axios 编译与发布 自动化部署
3 ~/ r4 Z8 O! N) V9 h; i13-3 ts-axios 编译与发布 运行部署脚本$ T# T& f' l6 m4 a* Q
13-4 ts-axios 库 在 TS 和 JS 项目中引用0 b; ] B+ l" Q2 y% ]. F6 O
1 n, R8 |; S6 P, i+ ]% b" |/ ]第14章 课程总结【知识梳理，巩固加深】" P) q+ s; K$ H+ S
本次课程的整体回顾，总结学习的内容。
$ I2 B% t9 J% f8 H; r14-1 课程总结 与回顾5 _4 @, z, u/ \$ J4 W; |0 i
* ~- ]9 F+ f( f z
( o4 }# a: X7 N8 }$ T* ?+ C1 B
〖下载地址〗
! F* l9 O9 S. w V5 s* p# E4 q- ^( h4 n
- [( S: r9 I) Y2 n
; c7 G! Y% ]/ r6 t/ o3 L6 N1 I' l$ x |
|
[复制链接]
在 TS 和 JS 项目中引用