" N+ a+ f9 z4 r) t" A/ H
! n3 t8 X( Q! Y: l/ y
〖课程介绍〗& ~- F8 \3 g I+ v. \ k k
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
2 `! c, r' r9 v. s6 y N4 R- C, y4 x" E' \$ r8 I1 k3 o9 \% b$ x) V: V7 A
〖课程目录〗
& U5 x2 a) L# Z& G第1章 课程介绍【悄悄告诉你，一定要看，有福利】6 X7 a7 E+ B5 c( ^. f% m) F6 i/ S
介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
0 T6 ]! e2 t- y2 {. R$ S$ d1-1 课程介绍 试看: }; S/ L1 f# f( M9 B
( @# f1 o* S9 A k, O第2章 初识 Typescript【初次体验】
' E: T! J0 W) H# L4 u2 L3 j' v教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
6 w" f6 m( t9 x c9 E0 i2-1 安装 TypeScript, O0 N0 U7 p; v7 I; I7 u9 w" y
2-2 编写第一个 TypeScript 程序 试看
# l% G3 \8 E i/ X, l; q; G4 r
?, Q' ^( P3 N) p7 y) \第3章 Typescript 类型系统【必备基础，牢固掌握】4 |9 |: ~* W7 w" t/ X
参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
5 b* H# k3 b/ C) A" `- e3-1 基础类型（上）- J' H6 t( W5 b4 b
3-2 基础类型（下）
1 f: I" l0 v; h3-3 基础类型（注意版本报错问题）
9 s0 }5 B9 Y$ j9 E' X. p3-4 变量声明 - var 声明
+ |# z% D7 t9 P* q1 Z6 p: P3-5 变量声明 - let 声明/ O* S* R+ {: i. t8 u! G/ d
3-6 变量声明 - const 声明, Z0 U& ^) F1 }6 g U/ a* K X
3-7 变量声明 - 解构 Z0 c+ W' S( Y2 a# H4 K3 D
3-8 变量声明 - 展开: G0 g& U# i, e* d2 z- e3 }
3-9 接口 - 接口初探4 ?/ e+ s% p# q
3-10 接口 - 可选属性+只读属性2 T) p( c; s. q' ~0 G+ _3 N
3-11 接口 - 额外属性检查+函数类型+可索引的类型# O0 Y: n3 c' P% h) \1 S+ v% _7 a0 a
3-12 接口 -类类型+继承接口+混合类型+接口继承类
4 l# _; I7 d9 r/ N9 ^3-13 类 - 基本示例+继承
* S$ e7 t& m+ y- I3 {" i& \3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
+ k* d3 ~3 m# t; J6 F& c& F; V3-15 类 - 存取器+ 静态属性
- Y2 E' G5 D/ H, P0 ]3-16 类 - 抽象类+ 高级技巧
$ X7 p" [+ S5 m2 c. P$ m3-17 函数 - 基本示例+ 函数类型: `/ Z) A0 A8 ?2 ]6 ^! o2 ]
3-18 函数 - 可选参数和默认参数8 ~/ M9 l3 g# r3 @4 `0 u
3-19 函数 - this+ 重载
" w4 M* b: F5 Y. b! w3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型, U1 z% _# ]! p& U: y: h4 q1 M
3-21 泛型 - 泛型类+泛型约束
. W2 u* [* E9 E3 A9 \3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
- N8 C3 S; M6 C3-23 高级类型 - 交叉类型- c+ I7 P) e% {3 Q: S
3-24 高级类型 - 联合类型
& Z/ Z+ V, a. E9 ^+ ~/ }3-25 高级类型 - 类型保护8 z' p8 a ]3 K/ u1 \
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型6 K0 R* X7 |" i; @. B/ v7 g
# ~+ A" C6 _- o3 r0 }; M' ]6 n
第4章 ts-axios 项目构建【工欲善其事必先利其器】
5 p. O" p1 D3 u分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。) Q& {2 u6 B9 e- i7 b. X& u* h/ Y) z
4-1 需求分析
) M O9 D! Z! q. J/ ? \4-2 初始化项目 - 创建代码仓库
; l, T! j3 W0 |( ?; |4-3 初始化项目 - TypeScript library starter T2 ?7 _1 M8 r" P1 y! Z
4-4 初始化项目 - 关联远程分支' }2 \/ O! T5 g# q$ H0 o
4-5 编写基础请求代码 - 创建入口文件& b5 s0 u a C8 x- a
4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
5 `& Q1 c: ~: @; N4-7 编写基础请求代码 - demo 编写. V% g& A) ~4 z$ m0 y% Y
, b" ~* E% E5 ?- I! ^, w; [. c第5章 ts-axios 基础功能实现【核心流程】- x4 N+ \) T/ A9 A
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
, J- x* G$ e3 b" u. J5-1 处理请求 url 参数 - 需求分析
' ?* W. t1 s! E9 s5-2 处理请求 url 参数 - buildURL 函数实现
- j% z% j6 ^/ J0 c5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
; `) C+ H; |9 r2 x! \5-4 处理请求 url 参数 - demo 编写# p6 d! K, s/ |# Q* o
5-5 处理请求 body 数据 - 需求分析+ 实现 试看
" J, c" H3 m( e6 \1 G6 \5-6 处理请求 header - 需求分析
' s, d0 ^: j6 @5-7 处理请求 header - processHeaders 函数实现
$ f, k8 Q! e) V, i- \/ x5-8 处理请求 header - 实现请求 header 处理逻辑
: c1 ^9 E' r/ t% R1 @5-9 处理请求 header - demo 编写
% r! i$ g: {4 c7 k5-10 获取响应数据 - 需求分析+实现$ O- q6 b4 C; A! i' H I& i
5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用" N) K. R. i! r& i- V
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
- k/ C' @, ]$ o8 v! I* @+ `0 W8 K8 P& D) L4 t
第6章 ts-axios 异常情况处理【不可忽视的边界条件】4 W9 O6 B- h6 p W2 Y" {
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。( t8 p# w. R7 S ? j5 |
6-1 错误处理 - 需求分析
: ^7 e- D9 |8 H# a- L- _/ l6-2 错误处理- 网络错误+超时错误+非200状态码+demo
E6 I; R1 O9 e" D/ n d/ I1 Y6-3 错误信息增强 - 需求分析. Q' x2 t. }, W1 X( d X/ \. v: b
6-4 错误信息增强 - 创建 AxiosError 类0 N, R+ |: ~2 \: ]$ w( D! Q, c% e
6-5 错误信息增强 - createError 方法应用+ 导出类型定义
' V/ p% u/ U8 \" C" x# N6 J) D# S# x8 q$ f7 R
第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】6 H! F2 c9 a2 F0 p
把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
) D+ J3 _4 o, G0 A# x; f" V' o7-1 -1 扩展接口 - 需求分析
- ~. B1 r" b% G, c6 Q5 W5 a. k7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
3 h f1 _" R2 i( u7-3 -3 扩展接口 - 混合对象实现+ demo 编写+ N6 b+ e5 O* B+ O2 a) ?
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写
* w \( ?4 @+ j: q! U2 y7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写9 n+ t) n8 A5 r6 _5 C8 N" t
( e# r6 ^8 ? C第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
$ \2 a6 i- o* r, |% {: s& O5 t实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
$ m9 c* I% F5 r. s8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
- A& D1 g( q! r1 {% |" s8-2 -2 拦截器的设计与实现 - 拦截器管理类实现# X3 L" A5 T) g Z( A
8-3 -3 拦截器的设计与实现 - 链式调用实现: J: F: ^) b/ L& |
8-4 -4 拦截器的设计与实现 - demo 编写- H0 |) I2 g# C. z
5 { j/ s: Z1 Q. |* s% z. Q1 d# h* {0 @第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
6 k8 q( ?4 R m$ I+ l F0 b( \7 K让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。1 b# \$ @- c; P# M3 b6 V( [) a
9-1 合并配置的设计与实现 - 需求分析 + 默认配置
" j1 X/ X; p! }% v4 g) Y0 N( ]* x9-2 合并配置的设计与实现 - 配置合并策略（上）9 G# i) y3 x4 s; p
9-3 合并配置的设计与实现 - 配置合并策略（下）5 F$ [- D) v" |! [* r4 F
9-4 合并配置的设计与实现 - flatten headers + demo 编写
# c9 T; ~/ H& u% L9-5 请求和响应配置化- 需求分析+ 修改默认配置
" I7 Z. P9 o: [3 K" g9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
) v/ e6 b# i4 D- b: f# @$ u1 d9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
$ F% B3 ?- y0 q; y1 B6 _+ ~# G" x& N" e V9 t& h& q( F
第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】" M7 X3 g: a+ w d- D/ T' p
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。% S5 f% m# H" A/ d
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案% t2 o. R" g$ Z6 D
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口; I, y. \; `2 f! `+ C
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现- w ^2 x9 \9 {9 @% j
10-4 -4 取消功能的设计和实现 - demo 编写0 S6 Q! I: B; D) q8 M* `7 h, `
& h/ K( a) T1 d4 Q6 h第11章 ts-axios 更多功能实现【锦上添花】; T& M1 |, d2 y0 C5 Y
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。, T7 V6 v. n5 I2 `0 ?7 b
11-1 withCredentials 需求分析&代码实现& demo 编写
8 x9 {" Q# B) ]' X% F* I( v4 z" T11-2 xsrf 防御 - 需求分析2 q9 b; A. a8 Y, j
11-3 xsrf 防御 - 代码编写
% k3 _( e" r+ C; t9 w4 y: b0 T& G4 `' T11-4 xsrf 防御 - demo 编写
) g. |: I- V/ K. H9 p: w7 c" i11-5 上传和下载的进度监控 需求分析+ 代码实现2 d }/ S" D1 \7 e4 u
11-6 上传和下载的进度监控 demo 编写
3 O+ h8 Z9 \3 k" T4 Z3 a11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写" E( v, v! \, F5 @+ x" ~ C; u
11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
) U5 z, M. ^8 F! ]11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写! k( X7 L b& R$ `# r) c6 J4 J
11-10 baseURL 需求分析+ 代码编写 + demo编写' d* R8 F4 Z9 W4 u. ]% N+ ~
11-11 静态方法扩展 需求分析+ 代码编写 + demo编写, V" M# W# f( L* [
a, C; V% K! a @第12章 ts-axios 单元测试【保障代码高质量】
7 Q. R/ a6 E/ T先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
( m: |, D! g$ g" {! r12-1 前言6 a' P$ @; n' K# U. M/ ?* K' ^( `
12-2 Jest 的安装和配置 Jest 安装# ?5 h* u+ C' n: a t& x1 J
12-3 辅助模块单元测试 准备工作
# }% x I" y* I. k; n; J) n12-4 辅助模块单元测试 util 模块测试-- \7 [. y& P/ b( T# [ A5 i* ]' |, B4 `
12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试$ R4 F. i! P# H9 l# z/ y/ H
12-6 辅助模块单元测试 headers 模块测试
" j0 `/ E- N8 Y12-7 辅助模块单元测试 url 模块测试8 b, |. M% a9 _; { L4 w
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写- T2 ?1 {9 K6 p/ f+ ~. N
12-9 header 模块单元测试 测试代码编写% y, n/ N& Y+ {2 W* E
12-10 Axios 实例模块单元测试 测试代码编写$ t }$ r( R7 Q! A
12-11 拦截器模块单元测试 测试代码编写# G6 i0 }7 _2 \0 |# Q. H/ \
12-12 mergeConfig 模块单元测试 测试代码编写
* O: a4 V2 I0 ]1 w: q7 c x+ t12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试
7 z/ _& G& j8 z# r* H12-14 剩余模块单元测试 defaults 模块单元测试
0 x8 C5 ]0 x2 |! |! Y6 K12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试2 _0 h) \9 u2 Z8 K
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试3 `5 l1 R' G! h
12-17 剩余模块单元测试 补充未覆盖的代码测试9 G2 z+ |) K# ]( T1 j2 c6 x
; a# `+ h- R5 F4 h第13章 ts-axios 部署发布【向社区分享你的项目】7 S, g- }; p6 c! C; z* C9 w: e) h
讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
1 M T. G5 ]8 x, R13-1 ts-axios 编译与发布 需求分析 + 编译和打包
& t& l5 [1 ?$ ~4 Q# P13-2 ts-axios 编译与发布 自动化部署
$ R; g, X' |- q4 ^13-3 ts-axios 编译与发布 运行部署脚本4 L' u" w8 t1 \- S, |) \( x9 i1 Q
13-4 ts-axios 库 在 TS 和 JS 项目中引用
6 h+ Z8 D9 f. T8 C8 `! w& l! L) [7 J% y9 f. j& `
第14章 课程总结【知识梳理，巩固加深】
# _7 l( ]7 v: u5 p% s本次课程的整体回顾，总结学习的内容。5 x7 U( b' B. n( E4 |# N0 ^
14-1 课程总结 与回顾" |% G7 k% N0 o; f
& [0 Q) t& e' E4 A, D. C
* W5 a& X& G) O* B& B7 Y" c〖下载地址〗# K2 X7 a! @; q* w. }1 s; h& f
8 b7 ]8 X( i$ b
, \6 ^8 R3 }1 b* x+ t! F6 b S
: o, i* ?" ?# q3 h7 I- I: S( D3 g |
|
[复制链接]
在 TS 和 JS 项目中引用