& p" D- `' i+ g% g9 A) T
% R* {! A" o3 X3 u
〖课程介绍〗# _9 {" _, ?9 L9 M8 A
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @- L9 G- L2 L+ D' X4 M- y4 L# H
, y4 x" E' \$ r8 I1 k3 o; I# B1 ~1 r' |' E& `
〖课程目录〗% }) M6 O$ Y7 r5 D. ~: } H
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
8 q* v1 {0 q/ K* k/ _" e介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。8 _7 k0 I# L3 ?5 B) h0 d
1-1 课程介绍 试看
% H( O l" D* B
0 w9 C( y; l' \3 i T) _# Z第2章 初识 Typescript【初次体验】
$ k- M y- e" J教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。' B3 \* R% Z! X6 e1 G5 h$ e* y% U( }
2-1 安装 TypeScript
/ F; y) K( p7 V% @; E* p! G9 O) ?2-2 编写第一个 TypeScript 程序 试看9 d) z, Z% U$ Q3 K* ]2 R
/ k& z3 } K% x* W! Q( k2 h
第3章 Typescript 类型系统【必备基础，牢固掌握】" t& h& X: B& e& K- D
参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。' c" M. ^5 t, y( L9 n( q
3-1 基础类型（上）) R1 D4 T6 y7 D% J4 J! T J" E+ q; e
3-2 基础类型（下） \" E( r. t2 Q' D! M7 A
3-3 基础类型（注意版本报错问题）9 Q" B% o0 o* f* G6 W) }6 s
3-4 变量声明 - var 声明
! D3 b/ w) S2 R9 w* d+ o3-5 变量声明 - let 声明0 n1 r" u, N. l
3-6 变量声明 - const 声明3 S! s2 v3 d2 h. F% J5 J
3-7 变量声明 - 解构
! J+ M, I4 P9 B H3-8 变量声明 - 展开
. a& ~7 {' P$ v- U! p! \. S. L0 {3-9 接口 - 接口初探$ z5 c( {: i& v" u4 Q
3-10 接口 - 可选属性+只读属性' \& H! ?( [- y D! H
3-11 接口 - 额外属性检查+函数类型+可索引的类型
0 t# S7 A8 M# t0 k0 |1 z3-12 接口 -类类型+继承接口+混合类型+接口继承类0 Q( l/ I0 B) F4 i1 I! ?
3-13 类 - 基本示例+继承
& Z5 \" E9 `3 g B3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符# X; G( |7 z: V& u0 A
3-15 类 - 存取器+ 静态属性2 [. A) I% N5 ]# f; z# D, e3 s
3-16 类 - 抽象类+ 高级技巧
6 V$ F- E) m5 z2 _, a3-17 函数 - 基本示例+ 函数类型
8 M7 G; x5 L c4 z0 [! ?" u3-18 函数 - 可选参数和默认参数
( `, W* q: c: ^1 e4 w% O3 j4 G1 i3-19 函数 - this+ 重载5 r( ~# `. i# T- R0 B# k8 M! v
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型% ?& E' Y' {( W3 d
3-21 泛型 - 泛型类+泛型约束) u+ P b$ V* g( z, B
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型2 v$ { f3 c, P6 j$ x! T
3-23 高级类型 - 交叉类型
8 ~4 J, o$ o T3-24 高级类型 - 联合类型0 F& `. _% e* Y7 U' r* ?. c/ Z+ h
3-25 高级类型 - 类型保护
6 F1 b7 x: G( }* t* A0 r6 D3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型" D; S; V1 z. U, t$ Q
Z' q$ k. p+ V- @' P0 u' m( s9 G
第4章 ts-axios 项目构建【工欲善其事必先利其器】
% |; f) B7 M2 Q: y4 s9 N' f3 h分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
9 L. Y1 v b8 \. `/ E& _- m& d) I4-1 需求分析
* X3 x9 _% B8 ^2 m- q4-2 初始化项目 - 创建代码仓库. j6 h6 I' `$ x4 N0 T; o7 ]
4-3 初始化项目 - TypeScript library starter
6 B$ ]1 V# T6 w2 Q( z+ R, N4-4 初始化项目 - 关联远程分支
9 Y( f U0 V) `8 T4-5 编写基础请求代码 - 创建入口文件
{# `. d# O' S2 g1 s4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求0 V) P6 i4 Z P3 Z
4-7 编写基础请求代码 - demo 编写
' Q0 L2 m6 Q9 e0 z3 |* p4 w3 t- e4 t# g1 g6 j! j) ?
第5章 ts-axios 基础功能实现【核心流程】
+ X, f2 p4 |' R9 l ~/ \3 z实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
K- [; K& e) R4 q3 s" F0 ^, L5-1 处理请求 url 参数 - 需求分析9 g: V j/ a5 Q" l& a: H
5-2 处理请求 url 参数 - buildURL 函数实现
* w) T4 q. L/ a! d/ I5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
+ }4 f |$ Y& k# W/ c6 c5-4 处理请求 url 参数 - demo 编写. U( d" ]- q: Y+ u) F
5-5 处理请求 body 数据 - 需求分析+ 实现 试看/ n+ A. k$ v, D4 I Y
5-6 处理请求 header - 需求分析 s/ y/ r& g5 M
5-7 处理请求 header - processHeaders 函数实现
; i% i5 k4 z$ |$ M6 q' y) G+ j5-8 处理请求 header - 实现请求 header 处理逻辑3 E# i- x# s9 r" b- F; Y
5-9 处理请求 header - demo 编写
& T- y0 L5 L/ O5-10 获取响应数据 - 需求分析+实现
& b, S5 x* H. Z+ W" j# ^9 g; ~5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用
3 C' q9 o# Q% O, |7 k9 W' u5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用' e& D- w ~+ r- i& _7 J5 I
) m% { ^( _# d+ J ^
第6章 ts-axios 异常情况处理【不可忽视的边界条件】+ S* K/ R3 s& O1 l9 o- t) o% u b
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
& w: f" o, r7 S' z3 U1 K, z6-1 错误处理 - 需求分析/ x& Q' H9 f; B% e) E$ U, d; m' S
6-2 错误处理- 网络错误+超时错误+非200状态码+demo, d. A! T9 ?& B
6-3 错误信息增强 - 需求分析
1 _/ A3 G2 m( {' i# s6-4 错误信息增强 - 创建 AxiosError 类4 j" X& ~. ]6 e( ~& h3 \) _4 E: g
6-5 错误信息增强 - createError 方法应用+ 导出类型定义& d( A1 J0 p& e$ _# u6 ?# B
& l/ I6 M1 e" O: Q! x# o2 |第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
) m/ ]# W$ [6 u/ n4 ^4 s把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
l k, r$ I, ^: t& m3 | H. q7-1 -1 扩展接口 - 需求分析. q2 o$ z( a" l6 `% g: K
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
0 \* W5 ~% v+ z" V7-3 -3 扩展接口 - 混合对象实现+ demo 编写 s% T2 `/ x! z& O
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
$ k+ b6 j$ P ~7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写
) ^. h% }8 S& Y7 ~' m
: D6 r1 [( d6 v- j: ^第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】2 h. T% z$ U% _2 o! a* \
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
. m/ ?0 g1 r9 _8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
! I s- q% d8 {9 p8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
* r9 w* P6 k2 F6 z( U" ]; d; D8-3 -3 拦截器的设计与实现 - 链式调用实现
0 O* C. j! c+ S/ E2 G8-4 -4 拦截器的设计与实现 - demo 编写
) ~4 Q Q1 k; m, \& Q1 U# h' Q$ p$ o
第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
* _3 e2 Y c3 G: P+ D. x让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。4 ~/ Q9 K- {; U/ N/ N) ^
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
a: }/ C8 C) W1 {9 I! ?' b9-2 合并配置的设计与实现 - 配置合并策略（上）" E' P4 ]* P) s% O; h
9-3 合并配置的设计与实现 - 配置合并策略（下）/ u4 z/ e: i/ x: |( [5 O- G6 O+ m# A
9-4 合并配置的设计与实现 - flatten headers + demo 编写* P4 ^, h% I A: U- a- H
9-5 请求和响应配置化- 需求分析+ 修改默认配置
' a9 H; q& M, h1 X& i- p" c6 q9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
5 z9 k i% p( \5 s; E5 \. N9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现2 K$ r0 @; ?( L. p$ X. u/ c2 g
+ w1 s! j8 e$ e9 \5 w) G: d第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】 M) x7 h2 C5 r/ M: D; d R
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。% v! ?8 O3 a0 @: q5 p* T9 H
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案" \1 B' ? O0 x u8 |
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口" n8 w$ Z& B- R
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现) }) L3 r, R5 e$ ^$ a+ T
10-4 -4 取消功能的设计和实现 - demo 编写! S" ~4 I9 [" j9 W1 |( |. \
6 W% D( a! h) C# z1 x5 N0 Z第11章 ts-axios 更多功能实现【锦上添花】
$ P& u& z: Q/ K7 r, j/ F% j实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。) s- y6 F- x% S
11-1 withCredentials 需求分析&代码实现& demo 编写
: |% D; z# L3 g3 h. b11-2 xsrf 防御 - 需求分析' U+ m6 i& m! g d0 }7 T/ R, ]9 m
11-3 xsrf 防御 - 代码编写
$ n. e2 F2 ?$ H- S" K11-4 xsrf 防御 - demo 编写9 b) |4 m4 S6 |" i! d1 c( y4 U) W
11-5 上传和下载的进度监控 需求分析+ 代码实现: W" U& N- T* R( I3 I% }
11-6 上传和下载的进度监控 demo 编写" T8 N2 y( ?8 }
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
, x5 v( F6 g/ A! j9 i) x' ^11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写3 z& }- J9 X8 y" N8 C* ^
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写1 z3 ^8 k& Y) i: S6 k/ G
11-10 baseURL 需求分析+ 代码编写 + demo编写
+ R% n( {3 D$ |) ?6 a; U D11-11 静态方法扩展 需求分析+ 代码编写 + demo编写9 N5 [& B: \8 d! x& W
3 L3 A" t) Y5 a5 e2 j
第12章 ts-axios 单元测试【保障代码高质量】; `2 |5 k$ C) \% |' b. V
先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
: E& e& z+ ^: m5 e' N& q12-1 前言
& I" m" @% T8 N# D/ A% S1 t/ V9 Z12-2 Jest 的安装和配置 Jest 安装+ F1 I5 U; S0 t! \% X6 r8 ~/ X3 N% U
12-3 辅助模块单元测试 准备工作2 w9 K, x, L2 Z7 T, U
12-4 辅助模块单元测试 util 模块测试-
7 S4 ^/ _9 W9 V* j$ I- t t/ {12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试) j* U2 c4 ^3 O" L7 A7 O/ K
12-6 辅助模块单元测试 headers 模块测试
2 k: c7 N, @% e3 k0 U; W12-7 辅助模块单元测试 url 模块测试
5 p* E1 r. H2 e' L( C* {* R12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
0 @* \6 S% E# y* [$ d% D2 z12-9 header 模块单元测试 测试代码编写
5 p4 d- M" Q: C12-10 Axios 实例模块单元测试 测试代码编写' ?9 X: W# ^: a& Z4 }0 C
12-11 拦截器模块单元测试 测试代码编写
+ l6 m3 }" C+ `% j' @4 p12-12 mergeConfig 模块单元测试 测试代码编写
+ Q$ _" Q. \8 r, W; i12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试 Q8 S+ V- f+ G# b8 a( X+ v9 M
12-14 剩余模块单元测试 defaults 模块单元测试
2 ]- [, A5 P9 m3 |& g, T K" M12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
( J/ r! W" C6 z9 H$ B9 H, k# S; {+ g12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试
* ~1 M8 [# P& c12-17 剩余模块单元测试 补充未覆盖的代码测试! e+ U K- R5 _& y6 @* ^) X
- |, W) i; N( U, J' p0 U, u( G2 V第13章 ts-axios 部署发布【向社区分享你的项目】
/ c/ k* V. r: \- t- L( \讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
1 C7 D% z2 B, }* p13-1 ts-axios 编译与发布 需求分析 + 编译和打包6 E! d. u2 y. o( m. b
13-2 ts-axios 编译与发布 自动化部署% a6 K2 D! Y( g8 z
13-3 ts-axios 编译与发布 运行部署脚本
% e4 h& u/ B8 V1 X+ A6 ] A13-4 ts-axios 库 在 TS 和 JS 项目中引用
3 C, y( V* \4 I+ m$ G/ b
" I: Q0 K2 D6 ~% a第14章 课程总结【知识梳理，巩固加深】- K# K+ z" ]% h; W
本次课程的整体回顾，总结学习的内容。
6 p8 E7 B* Y8 S1 A7 x$ n14-1 课程总结 与回顾. @, f- Y5 G8 e& Q m$ H
$ _7 U% {6 E5 E# z+ l e9 I2 \; D7 l7 m v T w
〖下载地址〗
6 s, V+ r. L& ^5 Z& C" m; n
! J2 v. e- r- |* Z5 R* N- S+ |( c a0 A7 m; A# c& B! ^
* X" {* f3 [* N; X( o" n | Y |
|
[复制链接]
在 TS 和 JS 项目中引用