8 B7 d2 Z9 h7 t4 Z4 u- v. D
: z6 J) O; ?. N4 w* q, m
〖课程介绍〗; N3 i; z0 R/ a& `4 f" T# E
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @) q; j# t5 O' o; j
, y4 x" E' \$ r8 I1 k3 o! P; e# L5 [) Y# D1 j, }7 z: E3 F
〖课程目录〗* O, U- _4 ]6 ^4 C5 u
第1章 课程介绍【悄悄告诉你，一定要看，有福利】' z8 ]- {+ H7 X$ Z0 V. w% q
介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。" x: X6 \0 B5 g
1-1 课程介绍 试看8 G$ {* j/ q' L+ l5 y0 P
- ~# o- \8 a) N- D/ p
第2章 初识 Typescript【初次体验】
' G% r% {& l* c! W2 F教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
( ~8 Q* Y/ |9 A5 ~2-1 安装 TypeScript) Y1 s2 M0 f& g$ ?- E1 |4 c
2-2 编写第一个 TypeScript 程序 试看! A# g2 r: L! G/ p
1 H0 a2 T/ Y" j/ j: U# e5 A第3章 Typescript 类型系统【必备基础，牢固掌握】
/ o8 O: _# m c2 q( e' n参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。8 \( {3 b! m: o
3-1 基础类型（上）" d& Q) G7 w2 o- w* e! l: g' K, W
3-2 基础类型（下）. Y: Y$ W; V" N3 T- H4 N
3-3 基础类型（注意版本报错问题）7 a2 H6 p Z ?' Q. l5 g
3-4 变量声明 - var 声明. L) Q& n, M3 ~
3-5 变量声明 - let 声明
7 h: J' P8 M. o) L) P' G3-6 变量声明 - const 声明& [8 Z& t) y0 L+ L, I$ g; V
3-7 变量声明 - 解构
1 A% o- R% f8 X) J: T3-8 变量声明 - 展开4 N4 Y) b# G, [
3-9 接口 - 接口初探8 _1 k* ?' ^# C5 \
3-10 接口 - 可选属性+只读属性
$ B& |7 w; n8 j0 _2 g3-11 接口 - 额外属性检查+函数类型+可索引的类型
% d1 J" \9 {. b1 G c* s' A3-12 接口 -类类型+继承接口+混合类型+接口继承类
9 B( \2 M3 R5 f& `* R3 s3-13 类 - 基本示例+继承& O+ X3 E- S. f N9 C- ]
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符( E o) d9 {7 v( R. N: Y
3-15 类 - 存取器+ 静态属性
8 q+ @7 x7 J! c: v1 J4 p3-16 类 - 抽象类+ 高级技巧
5 K9 g! W2 m, Z% c0 C5 m9 O9 I3-17 函数 - 基本示例+ 函数类型
$ c ?$ t; q. V: w9 B3 l3-18 函数 - 可选参数和默认参数
- s! y; w# ]" B7 n' @' T3-19 函数 - this+ 重载( C H+ p) I- ^$ g ]% [
3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型9 b/ K' |% ~( t8 ^+ W
3-21 泛型 - 泛型类+泛型约束. F- e, `2 T8 Z- L2 J) {) f
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型7 s: x6 Z$ p9 b3 o
3-23 高级类型 - 交叉类型
( R7 Y6 t3 J" C% v, Y' W3-24 高级类型 - 联合类型
: N) w% [6 ]0 h- L3-25 高级类型 - 类型保护
/ `# X K8 t% A- y% o3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型7 |! Y' P9 R0 }8 }
% n3 m k( k# F- @第4章 ts-axios 项目构建【工欲善其事必先利其器】
( g9 ?3 E# ~$ d% V& I* O分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
7 M" W9 U& j/ ], f4-1 需求分析
" c; Z. i0 F/ L8 ]$ ^4-2 初始化项目 - 创建代码仓库
% k- p8 N7 E' T7 S ^; o4-3 初始化项目 - TypeScript library starter
. ^' i3 Q: P, @) Y$ i# ~4-4 初始化项目 - 关联远程分支
s, A2 S4 j2 Q# e2 C4-5 编写基础请求代码 - 创建入口文件9 ?" ?) A8 s- u$ @ y+ o
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求' [' _1 Y; a% p3 G( S
4-7 编写基础请求代码 - demo 编写
! n" y# Q6 c" Q& {1 U9 \" U2 e6 p# ` p2 H+ K9 _% `
第5章 ts-axios 基础功能实现【核心流程】
6 s' u% T- H& o' r& W( c实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。3 a- `; @" @$ o$ _4 b7 D8 G
5-1 处理请求 url 参数 - 需求分析1 |9 d" V( @2 i& N
5-2 处理请求 url 参数 - buildURL 函数实现- S( m% C! p3 E- K! V p! C
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑% E2 h! X- R3 {1 e- L! `: X
5-4 处理请求 url 参数 - demo 编写
7 }" k, o) L' Z8 A5 U8 M/ D5-5 处理请求 body 数据 - 需求分析+ 实现 试看
( @+ p- G; E4 e5 C2 R; R9 E2 }5-6 处理请求 header - 需求分析4 O& V6 k: x2 ~( i$ p* ]0 s
5-7 处理请求 header - processHeaders 函数实现
8 C# _0 i' u4 m& E5-8 处理请求 header - 实现请求 header 处理逻辑8 H* ^$ d6 f" d2 a! m' k
5-9 处理请求 header - demo 编写6 A: f) A& g1 E g* _1 b: O( D0 |
5-10 获取响应数据 - 需求分析+实现
+ V- |! h4 v& u) q/ t5 \, Y5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用
2 D+ ]5 |" L0 J" N) X4 G' W5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
T4 d7 n1 y( a2 p, F: O5 G7 T
2 {% C8 L7 ?& |第6章 ts-axios 异常情况处理【不可忽视的边界条件】
* z7 {' `0 z+ J+ d8 O处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
1 s$ o" w* k& V" g, ?6-1 错误处理 - 需求分析
% s9 }3 F+ {, ~6-2 错误处理- 网络错误+超时错误+非200状态码+demo0 O" c% _" ]3 T% X* R+ Z: q
6-3 错误信息增强 - 需求分析
- h1 l2 _% ~8 f/ A3 r6-4 错误信息增强 - 创建 AxiosError 类
5 `. h+ O2 P* v' K* i- G8 ^6-5 错误信息增强 - createError 方法应用+ 导出类型定义
3 T/ M; c, w' P+ ~7 x
- F! b4 Y7 }* A$ A. v第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】, i0 ^! p, R5 U/ x
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
2 C, d3 {# v; x& k0 m" ?! D. i7-1 -1 扩展接口 - 需求分析5 f2 b: w% [& _$ p1 O' u
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
/ |7 ~& H/ ?+ k7-3 -3 扩展接口 - 混合对象实现+ demo 编写! b, f8 Z9 P8 i, W+ m. k
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
# j) h/ P1 O( ]: x7 j( J7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写# _/ r! E; n# Z) }
' v0 Q* f- m4 ?, g+ C6 d; ^) p第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】/ |# y* @, f+ n9 n
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
$ D6 o1 m: p3 V K8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
6 X8 k! I% k( g$ E, V# A8-2 -2 拦截器的设计与实现 - 拦截器管理类实现5 c& {/ E1 x1 \4 H3 m
8-3 -3 拦截器的设计与实现 - 链式调用实现! v- i% N8 ]6 B _
8-4 -4 拦截器的设计与实现 - demo 编写
6 z6 x( a$ x. ^5 `1 A! s2 {& O, f8 Q( b) S" S2 M0 B4 R8 ~( Q
第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
0 `' s4 j0 @' _9 z' B4 ]4 c2 ]让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。
7 j& ~3 b; |+ A" A! M8 c2 |9-1 合并配置的设计与实现 - 需求分析 + 默认配置" i9 @# o$ E- C% f4 f! W- `
9-2 合并配置的设计与实现 - 配置合并策略（上）) [& ]3 a6 r4 l+ B
9-3 合并配置的设计与实现 - 配置合并策略（下）" z: \7 a$ i7 r4 u1 y+ u# ?% [
9-4 合并配置的设计与实现 - flatten headers + demo 编写4 [% a t5 O# v
9-5 请求和响应配置化- 需求分析+ 修改默认配置2 s- I7 H" o1 Q
9-6 请求和响应配置化- transform 逻辑重构 + demo 编写( u: k5 b: P& g* S! ~' |
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
$ R" ~; o$ n" ]+ b& Y' O. f6 u8 C9 U1 H: e' R7 R
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】
( t: H% ^- z7 a0 M实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。
9 G. L/ q4 H" F! M5 f4 Q10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案; Z& Z$ O: a7 D) N/ l( k* H0 I( u
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口
2 [- _2 v' k- E) c10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
0 w# V/ [+ l. e9 l/ j4 a10-4 -4 取消功能的设计和实现 - demo 编写
" X6 H7 y- o# ^& [ ?+ m [* Y0 ~) Q' T' U7 x( |! [
第11章 ts-axios 更多功能实现【锦上添花】/ R# d" V) T2 p
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
3 V* H7 f0 \- O4 t- ~2 z! ?* g11-1 withCredentials 需求分析&代码实现& demo 编写; e6 @" {! X3 p" \6 A
11-2 xsrf 防御 - 需求分析& p% ?: u; U- a, N" A& O
11-3 xsrf 防御 - 代码编写2 M+ p$ J8 A& I& ?9 A
11-4 xsrf 防御 - demo 编写# S5 z. k m3 s5 W0 f
11-5 上传和下载的进度监控 需求分析+ 代码实现
" W' c( k( b( }& `' @3 u7 R11-6 上传和下载的进度监控 demo 编写
1 [# N$ R8 f4 X11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写; V: a, S7 H2 N% L( T4 b
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
/ I) @& b! Z, ]9 }/ f11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写, D7 T2 M0 }0 Z7 k. h, n2 x2 I/ g$ A
11-10 baseURL 需求分析+ 代码编写 + demo编写
2 \+ \7 t/ K& W1 p" K0 {11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
6 j% h" d* l/ z9 C. \) x! i1 W% y1 W! _) P3 I9 L
第12章 ts-axios 单元测试【保障代码高质量】0 s6 P& ~ g- F0 k5 ^0 S0 S
先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%. X1 i% ^" ]6 t( V+ G' j
12-1 前言! b f! b: M5 d' b; E) F& s
12-2 Jest 的安装和配置 Jest 安装! b' Q5 v" [! T- Z/ H
12-3 辅助模块单元测试 准备工作) T S7 I5 {1 o4 S; T0 x
12-4 辅助模块单元测试 util 模块测试-) b5 N) n4 F9 f' F1 i
12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
% X c8 i; m$ m9 Q+ ~12-6 辅助模块单元测试 headers 模块测试7 v k* m: l- Q+ j2 y
12-7 辅助模块单元测试 url 模块测试) ~8 Y4 ?5 s! S5 H- H
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写. N6 Q) t" t* a6 l/ o- Z( ` o
12-9 header 模块单元测试 测试代码编写, b1 S3 {. _- e. I
12-10 Axios 实例模块单元测试 测试代码编写
! V7 k1 ^& y" k- h- F% K12-11 拦截器模块单元测试 测试代码编写
4 H$ w" B. o0 a7 g, _6 m12-12 mergeConfig 模块单元测试 测试代码编写
: H- A) m \7 ]8 i0 X12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试4 k1 y& ^7 L( n0 ~- ?6 _' q5 M
12-14 剩余模块单元测试 defaults 模块单元测试* A W3 j3 e% X W! H g" n! m1 O0 ]9 M7 n
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试1 k, ?, O+ B9 I7 c3 {! {( s
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试) L) r% l- {$ C2 n+ J) f
12-17 剩余模块单元测试 补充未覆盖的代码测试, G/ ]5 _$ O+ o4 e
; _! y8 T" ^) W+ G第13章 ts-axios 部署发布【向社区分享你的项目】
9 B4 O6 F- C5 o& Y( v讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
j& N; B: U# P% B! C13-1 ts-axios 编译与发布 需求分析 + 编译和打包
" B6 c+ W! V! X# X& d6 @13-2 ts-axios 编译与发布 自动化部署* f8 K# f$ I9 n7 V
13-3 ts-axios 编译与发布 运行部署脚本
, U: v: q0 c5 R3 m13-4 ts-axios 库 在 TS 和 JS 项目中引用5 `7 P* F/ R5 K* l6 M
. D- F5 H0 U% s. u第14章 课程总结【知识梳理，巩固加深】9 O8 ?) ]+ c1 I6 z) m* P+ |$ _# W! f5 w' W
本次课程的整体回顾，总结学习的内容。) j/ u) O3 i( c4 ]4 R( H( D3 }
14-1 课程总结 与回顾/ L( j* Z3 s6 B7 O1 h' `' t3 ?5 O0 m
# S, v1 Q9 \& T5 r! O# _$ n- a" ^, V% I+ z5 M
〖下载地址〗& {6 |7 c4 \) R; t
% K& c, p9 q$ `) v
. d& O/ @) H$ n; q) t. ^/ {0 G: p8 w# J/ ?7 [
|
|
[复制链接]
在 TS 和 JS 项目中引用