5 I% c" H0 \! r& s5 d
% c8 _9 d& G. w
〖课程介绍〗
" F- u7 `0 L; r8 N, d8 O6 E' y( s) z TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @6 J+ F# [* x6 u# U( h' ~# F2 g
, y4 x" E' \$ r8 I1 k3 o, n$ t6 e9 n( a: y8 ~% A- ^
〖课程目录〗
* F+ C' H5 e$ x, r8 o3 ~- z# R1 z第1章 课程介绍【悄悄告诉你，一定要看，有福利】1 R! p- I* D+ }, m
介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
9 w0 v' ?9 m5 \, N% A1 B1-1 课程介绍 试看- h) g2 G. ]- @5 V2 ?$ ^' N
' f3 o) ]1 B: ~8 G- ?" n* f1 `" H$ F第2章 初识 Typescript【初次体验】
3 B9 u8 J1 S$ t( `/ T% h5 i教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
) m# j C3 ?0 R2 o S7 Z! M6 \2-1 安装 TypeScript
. c7 A! B+ [" F% c+ ]2-2 编写第一个 TypeScript 程序 试看1 c* J3 ]( x2 T7 s3 X) k. N: k- ^
a2 N2 x6 n( A
第3章 Typescript 类型系统【必备基础，牢固掌握】
: T% Q" p3 g3 k5 U" U1 s" p2 `参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。5 l& @, I f, u7 I& G8 t
3-1 基础类型（上）7 U% a2 R( Z/ y: D
3-2 基础类型（下）
" ?# V% V, [! _8 S3-3 基础类型（注意版本报错问题）& m, {% y3 q- T
3-4 变量声明 - var 声明
: d+ f# h/ d. f! F2 M3-5 变量声明 - let 声明) Z7 G% T4 ^3 [. [) l
3-6 变量声明 - const 声明2 `6 T2 E" C( a, ], s
3-7 变量声明 - 解构+ |/ I8 ]$ z- a$ }" q( I
3-8 变量声明 - 展开
* M7 |& c9 H! i3-9 接口 - 接口初探6 o+ _; c' d. l( {, J# _+ y' T) I$ ]
3-10 接口 - 可选属性+只读属性$ h; W2 f# b2 G E& M8 m l
3-11 接口 - 额外属性检查+函数类型+可索引的类型
* t9 }: z6 l. f; j3-12 接口 -类类型+继承接口+混合类型+接口继承类* |- c* t8 p4 e$ u& ^ I5 J
3-13 类 - 基本示例+继承3 v8 W' G5 ?) V: I# H$ K0 Y5 c
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符$ V1 Z D$ {3 |' v+ u+ K" U* X ~0 v1 @
3-15 类 - 存取器+ 静态属性
3 t/ A8 D- C( [0 H' H5 [3-16 类 - 抽象类+ 高级技巧& ~' Y' M9 q$ x( r
3-17 函数 - 基本示例+ 函数类型' m4 @1 |, c2 A# d, f. z& n9 b; k
3-18 函数 - 可选参数和默认参数* u' x# A7 F" L8 P/ o4 ]' k) j
3-19 函数 - this+ 重载( f8 n/ {( J! r7 X) f6 o
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
: F4 J/ l3 O% Z- }0 s6 R+ a& l3-21 泛型 - 泛型类+泛型约束
2 N! m. e' g: T' r6 E5 X, }( j1 n) K3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型5 h. |4 l& v1 h5 f4 ?& V+ t
3-23 高级类型 - 交叉类型
2 S& G% ~3 H, }) I! n( L8 u3-24 高级类型 - 联合类型- b$ l: b: F2 W- g! R. ?
3-25 高级类型 - 类型保护1 W1 F: h* {" F# T$ s. v T
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型; V1 Q# ^' A$ H |/ y5 o
7 F3 @8 ^. O. W. v9 k第4章 ts-axios 项目构建【工欲善其事必先利其器】
" F; c( _1 |( C6 _分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
- A. N4 x8 F, w* `4-1 需求分析
2 I9 C( n7 y) c; }4-2 初始化项目 - 创建代码仓库% b3 f; Y8 k. {1 p5 l0 R# X
4-3 初始化项目 - TypeScript library starter
3 _$ ~; `* k/ m! l, c9 v4-4 初始化项目 - 关联远程分支
' h h' L+ d$ n5 S& W0 n4-5 编写基础请求代码 - 创建入口文件$ `: y3 c" m# c& w
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求' _' D8 y1 R, g4 J& [% P/ N
4-7 编写基础请求代码 - demo 编写
$ K) j2 D; \2 q) E% i. V) s V
W' A5 m; ~8 P# Z8 v: a" k第5章 ts-axios 基础功能实现【核心流程】- M# u1 v+ D: a$ i {
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。$ \. N1 ]5 d; ?0 u+ y- r! B9 O# |
5-1 处理请求 url 参数 - 需求分析. ]# O; D! h3 i. [) _
5-2 处理请求 url 参数 - buildURL 函数实现6 b! M# B6 l+ U
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑8 ~8 h9 {# Z/ T7 d
5-4 处理请求 url 参数 - demo 编写
% ~8 H3 a% O+ G! z7 }1 J" F t5-5 处理请求 body 数据 - 需求分析+ 实现 试看: j# f* y; y7 L7 D ^! S7 Q
5-6 处理请求 header - 需求分析, X: }/ l7 Y, \ m5 h8 b* z
5-7 处理请求 header - processHeaders 函数实现/ z3 e- V- L9 e2 q; R @
5-8 处理请求 header - 实现请求 header 处理逻辑. n. e, ?+ ]. N/ m7 S" q/ I
5-9 处理请求 header - demo 编写* {3 K( s9 b/ v, \ Z& B5 w; I
5-10 获取响应数据 - 需求分析+实现
& y* f% H5 e0 j r: a% n5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用/ R9 m# b9 W. w1 |2 }6 N$ O& v% b
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
2 m! C1 O& v* j, |& ~: u" W# \$ b' }5 X6 u4 _6 \
第6章 ts-axios 异常情况处理【不可忽视的边界条件】: F, @& N: k$ A' ]1 [- N
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
& h& }1 B+ J1 E3 p% u* m* [" @6-1 错误处理 - 需求分析
$ [$ f7 o: ?8 g3 N- k' J6-2 错误处理- 网络错误+超时错误+非200状态码+demo
8 w+ n2 l" |" x9 U4 E/ A- V6-3 错误信息增强 - 需求分析
* Y C4 R: b( C) ~) ~, \6-4 错误信息增强 - 创建 AxiosError 类
8 C/ U' Z7 p6 i. J6-5 错误信息增强 - createError 方法应用+ 导出类型定义
5 @5 C* ?! Y0 E- f- R& w) l5 r M9 i2 {1 L; k5 L" t
第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】3 i! O3 b7 X! r/ C4 Z' {
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
5 `$ ~7 p, `( x) n& ?+ j7-1 -1 扩展接口 - 需求分析* U; v$ u, q. D* R; w. L
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
& `; M4 M. H' U- j5 h7-3 -3 扩展接口 - 混合对象实现+ demo 编写
; h1 Q7 L# _" D" I: b7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
9 v8 I# M& K r! K3 a6 J D7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写* f9 n+ F6 I+ V5 y& ?- P/ a( z
" u" A0 `$ l& r2 N6 C第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
# N2 I* L m* U! |: h* E. C实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。9 h' `- t6 H8 @# D
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计- z! O. R6 o6 _6 B* x5 \( _" X+ a
8-2 -2 拦截器的设计与实现 - 拦截器管理类实现* e* a' p M# K9 A. E; e6 j
8-3 -3 拦截器的设计与实现 - 链式调用实现
3 O& b4 P6 b; M+ d/ w8-4 -4 拦截器的设计与实现 - demo 编写
" z+ Q' ~: r* A% u" ?
2 ~$ g! h( \* r- U第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
" }) o( G' @" z让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。
3 F; i/ p/ K4 l. O2 S3 W* J9-1 合并配置的设计与实现 - 需求分析 + 默认配置
' D9 l; A2 P# `$ G, n8 G0 M9-2 合并配置的设计与实现 - 配置合并策略（上）
+ \1 Q( l! K# H& n9-3 合并配置的设计与实现 - 配置合并策略（下）
7 ^" v7 V) l- A8 L; S; u9-4 合并配置的设计与实现 - flatten headers + demo 编写! i/ {: G9 r1 o% F) ?
9-5 请求和响应配置化- 需求分析+ 修改默认配置7 E) [4 q' l3 f0 t2 h
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
1 k7 S7 o; h6 b6 @/ U* @& w9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现, v2 l# \7 z, s) W" ]* y0 N" q4 N3 u4 C
. T4 R4 u3 j: v# t; l4 R
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】0 i4 f! V2 m! v2 o; z
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。
! j. v, w% f/ M. M9 B# h3 k, {10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
2 ` m" d; p* b' A10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口& O& k2 S2 L' S( |
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
+ {. W4 r+ ?5 o3 }10-4 -4 取消功能的设计和实现 - demo 编写" d/ o5 z+ l! W; H
% P9 h9 g3 G: ]+ ]第11章 ts-axios 更多功能实现【锦上添花】
- e9 a V2 A* [. J/ b8 u4 S实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
}7 G4 D/ M5 {# M6 g4 n11-1 withCredentials 需求分析&代码实现& demo 编写4 r1 Y0 Q4 z) \8 B: r8 O6 j/ o3 V" g
11-2 xsrf 防御 - 需求分析
( d/ @/ Z: P& }$ w* f11-3 xsrf 防御 - 代码编写8 Y5 M$ N7 o, I8 ?9 M; F8 x
11-4 xsrf 防御 - demo 编写' R6 U/ k S* V' U$ u1 i
11-5 上传和下载的进度监控 需求分析+ 代码实现
( \( u9 G* t' G: p' _+ A4 S7 l11-6 上传和下载的进度监控 demo 编写
5 @ s0 A) K1 _/ Q4 U0 Y11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写$ s* X$ Z. k/ o0 f9 K5 I
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
1 @/ J% U$ ~7 q: D11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写: h7 R2 X1 \6 a# |3 n g9 Y8 L
11-10 baseURL 需求分析+ 代码编写 + demo编写
1 ~& z' ]/ M( S( C11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
8 V$ _5 A: A' \$ s2 [1 }% s3 Z( a
8 ^6 h6 Y S# B! L7 Q& `5 Z第12章 ts-axios 单元测试【保障代码高质量】5 Y7 i1 z' A4 E7 B5 ]0 v. O5 C) a
先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%" _& c2 e5 v+ O) K8 \
12-1 前言2 S. u J" }3 l y2 D
12-2 Jest 的安装和配置 Jest 安装* B' T5 ^& U4 s9 O$ T' W8 B
12-3 辅助模块单元测试 准备工作' D8 u7 E+ {# W& R7 m6 @) R/ x5 \
12-4 辅助模块单元测试 util 模块测试-
" W9 \* A* [3 q1 G" R12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
& q, _% I; }! n) a9 [3 o) s. h12-6 辅助模块单元测试 headers 模块测试
, _; A2 e% H( P3 Q, C# a& n" r' U12-7 辅助模块单元测试 url 模块测试8 W: j5 f/ H' Y6 w: M( O# l
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写2 s8 M7 P- h) O: M
12-9 header 模块单元测试 测试代码编写( i( }/ }2 v( ^. ?3 W
12-10 Axios 实例模块单元测试 测试代码编写
" J' r6 d6 u% t$ ?3 B- f6 Z5 J9 y12-11 拦截器模块单元测试 测试代码编写* i3 w! l! a, H+ N7 b' I
12-12 mergeConfig 模块单元测试 测试代码编写* G) k" q/ N" F+ E: Z
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
+ t5 x& U% ~. n0 M/ w12-14 剩余模块单元测试 defaults 模块单元测试) b8 Y# k$ X0 H9 r
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试: L- x; T2 B' j- B) O: n' g7 l
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试; o: S5 |' j/ |- [# b) |# L# O
12-17 剩余模块单元测试 补充未覆盖的代码测试3 b9 F3 Y# Z" m/ G
) r' h9 C! n6 g7 w/ |
第13章 ts-axios 部署发布【向社区分享你的项目】! G3 z$ X8 }* [* g' p
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。, z. ^; ?: l3 f/ l( t) G& n/ J2 V
13-1 ts-axios 编译与发布 需求分析 + 编译和打包3 T5 t$ s9 j$ x8 H: |4 K" @
13-2 ts-axios 编译与发布 自动化部署0 |$ H! }0 M) ~; O7 f+ w" L+ ^
13-3 ts-axios 编译与发布 运行部署脚本, U1 {$ y# Y" a! R
13-4 ts-axios 库 在 TS 和 JS 项目中引用/ D4 |0 U- p( `: U( @
0 v- g* X& t# \第14章 课程总结【知识梳理，巩固加深】$ r) V; I; Q' a7 I4 O7 c) N
本次课程的整体回顾，总结学习的内容。
8 R# E$ [9 [- Z1 ^! s14-1 课程总结 与回顾
6 L8 |. T9 N8 a9 e5 Q& L+ |! P$ O2 t1 x J( Z' w7 K# ?& s
N& W9 s0 Q7 p/ j% h6 Z
〖下载地址〗! |- m! I4 [9 z( I% r7 |
1 J$ F+ N+ P! k/ l0 k3 G
# j2 Q4 Z2 e+ K) E1 a/ k! c8 S
. I- t; ~ y4 Q& Q |
|
[复制链接]
在 TS 和 JS 项目中引用