( |. h/ y3 ~8 i; s
& }' o3 e/ J( F6 S+ H+ ~& r
〖课程介绍〗# ~* z% l+ d2 m/ m
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @* e* o/ \! d% t% @$ }8 \9 s5 n+ S
, y4 x" E' \$ r8 I1 k3 o% }. @. D/ N1 o9 z
〖课程目录〗& s! J! n! }8 {& _2 \8 R1 f
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
0 R. t1 R+ m1 O2 Y介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
# S$ p2 [# [6 o! E- O1-1 课程介绍 试看+ g8 s: h0 j" w0 ]' l
- R7 \: D* ?8 Z* d( l! H
第2章 初识 Typescript【初次体验】/ j/ l% l: e, m
教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
$ u) ^( ?( K% D2-1 安装 TypeScript9 u, E- I/ s8 z( ?1 |3 i
2-2 编写第一个 TypeScript 程序 试看 B0 s6 W( x) M" M/ Y2 `
# I* N" ]: p0 m6 m9 K+ N) c第3章 Typescript 类型系统【必备基础，牢固掌握】
; ]% v$ s2 A: q, W. t: d参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。' d$ |9 s) @0 p$ H0 @& C: C
3-1 基础类型（上）# r2 u/ {: x: ~, C* z
3-2 基础类型（下）3 c9 Y, U' j5 E6 q
3-3 基础类型（注意版本报错问题）4 K6 r2 N% r$ ]8 v8 i2 q; M
3-4 变量声明 - var 声明/ b4 v+ s7 J* S& h: |# A
3-5 变量声明 - let 声明
2 i) L! j5 u$ S& t7 r1 k3 U3-6 变量声明 - const 声明0 j2 ~/ {$ I& A$ E2 s0 S* {! \
3-7 变量声明 - 解构
; q2 X: l: _" I0 K3-8 变量声明 - 展开- Q, Z# W6 Y, ]2 a
3-9 接口 - 接口初探
% ]9 q# \) h7 q9 ~- {4 B" K7 D3-10 接口 - 可选属性+只读属性
9 ~: C- W2 u" }" }; S: i* T3-11 接口 - 额外属性检查+函数类型+可索引的类型1 v7 m0 j: W9 a& o& h
3-12 接口 -类类型+继承接口+混合类型+接口继承类& K+ g+ H* x7 c- f' y, O" J1 R) F
3-13 类 - 基本示例+继承; m0 r1 e- @; \- Y; r, C9 |
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符; o$ i5 G) R8 G# S3 D. M
3-15 类 - 存取器+ 静态属性
2 s6 K2 o- G, q3-16 类 - 抽象类+ 高级技巧
4 u0 I2 N# T# a3-17 函数 - 基本示例+ 函数类型2 c& @3 g2 ?9 A3 M. {: K
3-18 函数 - 可选参数和默认参数
8 t8 O0 W7 I8 \) y+ H3-19 函数 - this+ 重载2 T/ N# g) {7 X9 |6 \
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型1 W7 @1 e+ v8 `
3-21 泛型 - 泛型类+泛型约束
& t( G ~3 w# T/ E; H# _4 X" U5 d3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
; E3 x) @4 H; u% n/ Y7 |; ?$ F! {7 a* L3-23 高级类型 - 交叉类型9 L" ~1 y h' u
3-24 高级类型 - 联合类型
9 } u# i/ @1 I# n+ ^% ?' h* j% p3-25 高级类型 - 类型保护3 ]/ }" g, P5 n4 s4 D; d7 r
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型& X% z1 A& d. h
& Y6 g/ C' V) }& y+ j0 v第4章 ts-axios 项目构建【工欲善其事必先利其器】
# u9 ~" [- A* u7 v分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。3 S- k9 e6 B" }* Q
4-1 需求分析 {% b$ f4 `& \9 w: b
4-2 初始化项目 - 创建代码仓库
) {9 g/ J6 ?% X" M: ?5 } F' g4 [5 ?4-3 初始化项目 - TypeScript library starter
% M2 O" k/ F- B6 w( `4-4 初始化项目 - 关联远程分支
" b7 O' v7 J8 B2 X4-5 编写基础请求代码 - 创建入口文件
* ~# w1 [: D* M5 r4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
3 k+ b7 B& E1 c2 d* P* P1 O4-7 编写基础请求代码 - demo 编写' s k& [- T4 Q4 K+ w
$ ^- ?5 V& K! @! D第5章 ts-axios 基础功能实现【核心流程】* N1 f4 S0 e$ n$ V6 r
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。( M/ f! X! y6 e
5-1 处理请求 url 参数 - 需求分析
6 i4 T& p* K% }* D) y9 {. g. [5-2 处理请求 url 参数 - buildURL 函数实现
5 m9 O1 ~4 r9 @& p# L* B& h5 f. V5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
F3 A8 O4 \$ J: c5-4 处理请求 url 参数 - demo 编写
0 ~7 g G* u0 U4 S5 T" X5-5 处理请求 body 数据 - 需求分析+ 实现 试看
& f, O( M% R1 f: e7 M( t5-6 处理请求 header - 需求分析
/ u7 p }4 f4 e' s' X1 m! x5-7 处理请求 header - processHeaders 函数实现( O1 r7 N" d! P- @0 h" ^9 z. g
5-8 处理请求 header - 实现请求 header 处理逻辑
& g F6 [0 F7 t5-9 处理请求 header - demo 编写2 a: S9 Q' [5 U1 \: C* Y
5-10 获取响应数据 - 需求分析+实现8 t9 g! b7 H1 }
5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用, ?, d! \- i/ X& G9 K5 g- j! c% C* I
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用6 R" E: @7 j; K( D2 G; B
4 ^7 ~! Z3 Z2 M+ }* H0 C, B
第6章 ts-axios 异常情况处理【不可忽视的边界条件】* {, d& Z0 ]& ]; z f/ ~3 r
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。- R; v5 r/ I u- `" X" _0 b/ g J
6-1 错误处理 - 需求分析
; U5 n! m2 W) F4 o( O0 x6-2 错误处理- 网络错误+超时错误+非200状态码+demo) ]2 F. {4 H+ }" m. T, `( l8 b
6-3 错误信息增强 - 需求分析/ l- _/ U6 ?: q, |/ @8 @ h+ ?
6-4 错误信息增强 - 创建 AxiosError 类
' S% c9 ^8 X$ ?7 h/ q6-5 错误信息增强 - createError 方法应用+ 导出类型定义( [. o8 M$ Y1 @/ [
: s: g! }4 Q* i1 T" B第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】4 [. ~/ X- i) `. \+ U0 ]; Y0 N; f/ O9 j
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。) W' }# L6 i" F+ [
7-1 -1 扩展接口 - 需求分析2 J1 Z, u# E; F3 ]2 J5 o$ u
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
) w o. r* g8 h, n1 g* T7-3 -3 扩展接口 - 混合对象实现+ demo 编写
2 }, N4 D4 j, }1 s, H4 M5 }$ K7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写# c0 h1 d' L7 s9 {6 r! f
7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写4 `* Z7 B0 q. I, x* X
$ f; |2 M2 Q% ?; C. w第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
0 A' m5 R; ^# j% A实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。! i( V. p" [0 z g, Q6 b* Z5 i3 A
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
1 e6 _( Q% ?, u8 s& t8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
4 S" e7 k, ?/ }6 @9 l8-3 -3 拦截器的设计与实现 - 链式调用实现
( V' I$ U& Q7 W- {' G) o4 q8-4 -4 拦截器的设计与实现 - demo 编写
$ o9 U$ N& f) r$ L1 U, h
/ f. j9 q) Z. W- X第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】! X, @0 q1 H4 l" H& \, D, _) V- i
让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。
; s$ o9 d1 |' z" P0 I/ h) Z* Z9-1 合并配置的设计与实现 - 需求分析 + 默认配置
+ d7 @6 l: n7 ~9-2 合并配置的设计与实现 - 配置合并策略（上）9 v! V9 Q# `& S' w( T
9-3 合并配置的设计与实现 - 配置合并策略（下）. h h, h7 C% M( H
9-4 合并配置的设计与实现 - flatten headers + demo 编写1 X' C4 v6 S, |6 S# m8 z; c3 f
9-5 请求和响应配置化- 需求分析+ 修改默认配置
) d5 z9 S" I- K* N. u9-6 请求和响应配置化- transform 逻辑重构 + demo 编写4 f% D& s/ H; p" d$ y# e
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现: D6 d( d! a9 s% s, V! {/ q
; Y& X$ s) [5 Y
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
0 Y# l4 U0 y# H; D9 E实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。3 q, s5 B9 n; d
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案
6 l$ A; w% `- j0 E7 d10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口. [' c* p' s/ P* l
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
J: ^" J- A( a: `) F% M/ `10-4 -4 取消功能的设计和实现 - demo 编写
' _- Y. m& I+ n) D8 F
3 S: n6 Q* |5 _ y第11章 ts-axios 更多功能实现【锦上添花】
0 I, r- m" k& u) Q5 N8 l& f) q实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
( h. j2 a b5 q, k6 m- a1 g6 ~11-1 withCredentials 需求分析&代码实现& demo 编写
0 O% U" S0 E. j) A8 k9 c' r11-2 xsrf 防御 - 需求分析$ Z8 E+ l/ b v& Z. Y: V
11-3 xsrf 防御 - 代码编写
8 ~9 ^4 C) T) ?0 ^( |5 [' k+ ^11-4 xsrf 防御 - demo 编写+ L8 v2 @$ H: ]) P
11-5 上传和下载的进度监控 需求分析+ 代码实现$ o+ S* [. U1 |, ?# k; I) C# n7 T6 a$ @
11-6 上传和下载的进度监控 demo 编写. {4 b$ u# W. |
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
. {" _# w8 Z6 z5 { a6 `3 j% S) n( Q11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写7 A: w. W/ k3 V+ }# k
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
3 l% j" }2 Z$ ?11-10 baseURL 需求分析+ 代码编写 + demo编写4 ]# e; c. U- J
11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
/ g; N6 W0 I5 X" g6 f: \, p* r% E4 I) h, ^4 a7 q# V3 Z: N" i
第12章 ts-axios 单元测试【保障代码高质量】
( @( n4 B) Z& J先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
0 q+ x# b% m: w% a12-1 前言1 L2 w5 E% I8 g7 N
12-2 Jest 的安装和配置 Jest 安装
6 T- A! m' n; e7 Q, _2 X8 a, |12-3 辅助模块单元测试 准备工作1 ~2 W0 J2 ~/ @+ k
12-4 辅助模块单元测试 util 模块测试-/ a+ k- @9 G+ B0 C# x
12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试/ v) Q# }: @! W: k1 \& s4 \; a7 t7 j4 v
12-6 辅助模块单元测试 headers 模块测试
) P; y* j7 y2 p12-7 辅助模块单元测试 url 模块测试
& A: `& ^0 W3 A6 c; z' ~5 Q& y4 E0 \12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
( E/ \" P6 w8 C$ V) B* v12-9 header 模块单元测试 测试代码编写5 N9 e7 ~! y+ y5 N+ I% ]3 y
12-10 Axios 实例模块单元测试 测试代码编写" e5 K E( O, V- j3 ~
12-11 拦截器模块单元测试 测试代码编写- j% N6 C5 f& P3 h1 y* S: _; R
12-12 mergeConfig 模块单元测试 测试代码编写/ k# q& ^. b/ f3 L
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
: s4 ~% m! w- ?8 y. o- Y12-14 剩余模块单元测试 defaults 模块单元测试
6 w" X# t5 ?8 E9 Z4 D/ n3 v/ {12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试) H. d' E8 y* x! w$ i9 V4 b
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试' w% F( h' V( {4 w9 {% A/ h
12-17 剩余模块单元测试 补充未覆盖的代码测试5 c7 ?+ s- P8 K7 ]1 a
/ x/ z5 M( x( i9 c i第13章 ts-axios 部署发布【向社区分享你的项目】2 c4 L, s3 _8 N- V4 l1 C1 _* E$ M- E
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
. Q5 K! Q- S3 `$ ~( ~& @ B13-1 ts-axios 编译与发布 需求分析 + 编译和打包
0 J0 U4 L- c# |4 |$ r13-2 ts-axios 编译与发布 自动化部署
* ~! [+ `- |. y2 i: f) e13-3 ts-axios 编译与发布 运行部署脚本
5 u7 ?& h$ I. E& V7 H$ N13-4 ts-axios 库 在 TS 和 JS 项目中引用4 v5 `7 ~8 w. C$ q
( H- F: U% O* u+ G6 t
第14章 课程总结【知识梳理，巩固加深】
8 V1 W) @ \2 `. d1 J- Q本次课程的整体回顾，总结学习的内容。 O1 c# q$ m L. ~% \
14-1 课程总结 与回顾
$ e' E r9 R4 z, M7 U! |* k( t* Y/ O
* v7 `8 f4 q. l
〖下载地址〗
8 F% S. i! _7 ^1 F3 z/ C6 {
- c) W/ E# {+ P# s: S0 N; D$ r! P* { ?% Q# x
- y/ v8 @. H% u# H5 i
|
|
[复制链接]
在 TS 和 JS 项目中引用