+ u8 {: |6 ?& b6 M
* @9 Z4 v& K5 c6 Y+ ^1 t& P
〖课程介绍〗
0 R! I' ]+ J6 |& w7 B TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @
* S1 u1 ^7 T$ ?7 F, y4 x" E' \$ r8 I1 k3 o& S$ z3 u# B6 M: d9 ^; w
〖课程目录〗: \+ T% P5 Z5 l& ?$ i5 I" O
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
' h* d( h3 c1 Q介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。+ r5 g7 y. C4 r* ~! z
1-1 课程介绍 试看' n. [2 R8 r( s& B+ e% M, R: ^" A
# w& H" C( p0 q7 u* L# v第2章 初识 Typescript【初次体验】9 g0 s! N4 u' l6 H8 Z
教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
# ^! H, _- d: l, J! {, |3 T" R) p; L2-1 安装 TypeScript
& \" J9 \! k# M2-2 编写第一个 TypeScript 程序 试看
& w+ Z. z D6 a5 n* T2 E1 U0 t6 h1 n) \; m+ W9 l5 w
第3章 Typescript 类型系统【必备基础，牢固掌握】
# [6 a# Q+ V$ F7 T. N, W参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。
8 P8 ~$ J8 p5 ?) C# D3-1 基础类型（上）& R: x' i; ?0 S; k- Y$ M6 o) I
3-2 基础类型（下）! h _4 N( S; Q4 F" Q
3-3 基础类型（注意版本报错问题）9 B, k7 S S4 N4 w4 f3 R3 W
3-4 变量声明 - var 声明. }, {* j! p0 D! ?% M9 p
3-5 变量声明 - let 声明
+ b' H& ~$ _8 a- H6 M3-6 变量声明 - const 声明9 Y# n0 s2 x: @% V. [
3-7 变量声明 - 解构
6 w- k: w. T+ T6 q. u7 D: m3-8 变量声明 - 展开, p1 i5 t F# u. a
3-9 接口 - 接口初探
+ L% `, Y" E9 K: a. M$ E3-10 接口 - 可选属性+只读属性
6 P0 l, z6 x; a8 w. D3-11 接口 - 额外属性检查+函数类型+可索引的类型6 b2 x% A% ^0 j, Z! s/ J
3-12 接口 -类类型+继承接口+混合类型+接口继承类
8 O1 G, c0 y6 H* m# Q- k' m6 ~" d3-13 类 - 基本示例+继承
, x9 B. K7 T: y& T. r5 E1 i: x1 F5 L3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
; U! T7 M/ s" j; \2 ^0 B/ U c3-15 类 - 存取器+ 静态属性8 @: q+ l$ S( k
3-16 类 - 抽象类+ 高级技巧
8 l- i' I1 x9 F; {- K3-17 函数 - 基本示例+ 函数类型
4 g4 j/ _/ @$ m& u3-18 函数 - 可选参数和默认参数 e" g; o0 ?; @8 U0 k
3-19 函数 - this+ 重载
- V5 d* I1 e9 D$ G, n3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
2 H1 M& a0 Z+ C/ n/ ^3-21 泛型 - 泛型类+泛型约束' |. |" ?! W w# q
3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
, o9 J) N/ E! ]3 y' @& E& ~8 X+ B3-23 高级类型 - 交叉类型6 s5 N ~: T5 ?6 \
3-24 高级类型 - 联合类型
& v4 L# a. J5 m. W) a# v! F3-25 高级类型 - 类型保护5 J% E- s0 s& ^' ^! Q) e) s/ f
3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
2 @$ b! a/ [& i2 f
7 J* t0 F/ A, G5 N* m第4章 ts-axios 项目构建【工欲善其事必先利其器】
4 s" U, ]- n. ]& H3 n0 Y( g! Q分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。9 P8 l4 |2 r: b0 e1 i( H1 t
4-1 需求分析
) ?2 Q! r- Y; o( Z# C6 X/ I4-2 初始化项目 - 创建代码仓库
7 B1 E& C) R6 I4-3 初始化项目 - TypeScript library starter
( ?* ^8 O0 f0 o# x4-4 初始化项目 - 关联远程分支0 t$ E. ], {* }3 D+ c0 ]
4-5 编写基础请求代码 - 创建入口文件
- e5 L C5 Y2 D# ?1 l% A2 n/ X% r4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求
; d$ ^3 J5 `: e6 q! {- m9 |4-7 编写基础请求代码 - demo 编写 c: U7 [6 Y' H: D: ]
! r& m% y$ [" C, Z4 z/ d* |2 x% i. }第5章 ts-axios 基础功能实现【核心流程】
$ {3 G" [# O( @$ ]% r: T( G实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。
/ ?: Y" w" N. E; x5-1 处理请求 url 参数 - 需求分析
: Q; d. ?+ c1 ^5-2 处理请求 url 参数 - buildURL 函数实现1 W7 U& o7 ?4 Q% C$ y7 [
5-3 处理请求 url 参数 - 实现 url 参数处理逻辑$ ?$ J% v" u7 w* m' O! h$ c
5-4 处理请求 url 参数 - demo 编写' y% }. Z( }$ Y% ~
5-5 处理请求 body 数据 - 需求分析+ 实现 试看0 C6 G, b, r6 w' s! C
5-6 处理请求 header - 需求分析
/ u1 V# C8 Q# Z4 h3 x) R5-7 处理请求 header - processHeaders 函数实现
7 o$ p( N' k9 R' I0 X2 t$ D5-8 处理请求 header - 实现请求 header 处理逻辑1 t2 \5 z o' H0 P# A
5-9 处理请求 header - demo 编写
3 F- A. i5 u. y4 |" w5-10 获取响应数据 - 需求分析+实现! ?" E/ O* Z. o* `8 d( N
5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用
! z8 X4 v3 u! D3 }' w1 R5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用: {6 i7 }) ~8 X/ {, B
9 ~9 T% U' g$ `+ j& u9 y
第6章 ts-axios 异常情况处理【不可忽视的边界条件】
! y) ~0 O) G1 @0 }( [处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。
6 G7 U+ ^' Q1 }) V6-1 错误处理 - 需求分析
5 o' D; g- n$ H) ]0 a. M% F: m' y& w6-2 错误处理- 网络错误+超时错误+非200状态码+demo
, F! L* \/ F4 z! m$ S8 d3 u6-3 错误信息增强 - 需求分析; ?; Z& @* \4 ~: f; B4 ~9 o8 K
6-4 错误信息增强 - 创建 AxiosError 类! J% V- F/ \- m. m* Q
6-5 错误信息增强 - createError 方法应用+ 导出类型定义9 I2 m C5 H/ c/ E5 r
5 t# A0 e+ g: X$ Q+ l2 Y' B( K
第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
% n' U; a/ y) V2 Z2 w把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。
9 ]! p- |1 x$ E+ T% W7-1 -1 扩展接口 - 需求分析( |2 B1 m/ I4 i5 k% ]
7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
1 L# J% e2 k$ U C1 [7-3 -3 扩展接口 - 混合对象实现+ demo 编写; ]0 p' N6 d; ?& A+ e5 X! ?
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写; u8 i; D0 m0 d( H
7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写3 M( M r1 z, i( B
6 ~0 v$ F, q1 @. v
第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】/ F3 Z( i6 q M1 Y1 x
实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。
+ l# [- i5 W- s" K+ |8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
( B: ]' z. P* X) I2 Y5 \, Y8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
8 l7 j1 N7 K+ H+ I8 P8-3 -3 拦截器的设计与实现 - 链式调用实现
9 q2 k4 k* p6 w l4 L; t8-4 -4 拦截器的设计与实现 - demo 编写
2 ^) }& s! b, L* V& F) v/ ^2 Z& x) B3 W
第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】
5 x/ Z7 I# [# S/ N让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。% g% M# `; g! i# ~
9-1 合并配置的设计与实现 - 需求分析 + 默认配置5 ^8 B6 S/ G: V! `
9-2 合并配置的设计与实现 - 配置合并策略（上） U6 L6 G% h% d3 c8 l7 c7 M2 H
9-3 合并配置的设计与实现 - 配置合并策略（下）
! Q5 B, z) R4 b& k$ A5 C+ y9-4 合并配置的设计与实现 - flatten headers + demo 编写2 P" y( x3 X' Y3 m* J+ `
9-5 请求和响应配置化- 需求分析+ 修改默认配置
' p5 l/ ~8 {* t% q6 n7 W9-6 请求和响应配置化- transform 逻辑重构 + demo 编写
; K `* q- [! O7 G% F; q T, g4 `9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现7 w, O: C" w9 [& A& I# J
) o" n- s7 O5 o第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】3 C8 j. l9 i/ ?2 l
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。% U% s: j! D- s4 V' d4 @" d
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案+ X# C5 j' l+ {: H+ ?) \
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口+ M% @: d0 ^ w. F3 O
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现
) E8 P# e% I5 B4 E3 c1 q1 F- e0 a' W10-4 -4 取消功能的设计和实现 - demo 编写& f. r+ g. u# m/ S# @% b
3 j3 c/ W+ h# a' o0 r8 Q
第11章 ts-axios 更多功能实现【锦上添花】
& g0 X7 L& h% g# c/ v+ f# g实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
: f( Q1 u* e* q8 H/ _11-1 withCredentials 需求分析&代码实现& demo 编写
/ {6 a" C+ ~& [' H* ~11-2 xsrf 防御 - 需求分析( k8 w( ~+ E7 `3 f3 d" w
11-3 xsrf 防御 - 代码编写- k* X+ z$ V% X y" L4 o
11-4 xsrf 防御 - demo 编写
, q1 a e, _9 I0 k; k7 r, R11-5 上传和下载的进度监控 需求分析+ 代码实现
0 @/ R3 p) c( u& ^11-6 上传和下载的进度监控 demo 编写# g! m3 {, ~/ X/ D7 k- l$ P( r
11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
% q% s$ l9 u" J; I% `3 N" B( ]11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写
X; a2 ^2 \1 h0 _' V. `3 C11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写5 z- Z; k# M9 L
11-10 baseURL 需求分析+ 代码编写 + demo编写
6 c6 ]. E- _5 s4 E6 R11-11 静态方法扩展 需求分析+ 代码编写 + demo编写" i& p: r# S; q: B9 e. T
& K4 X1 G* H- W! t5 f第12章 ts-axios 单元测试【保障代码高质量】0 P% H5 y# G. U! O5 M
先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%: w" d4 e* j+ i* M% F# R2 W
12-1 前言( |1 ]/ }2 Z- i7 R
12-2 Jest 的安装和配置 Jest 安装
1 {3 S. F/ c+ [- O+ o( @2 _+ C12-3 辅助模块单元测试 准备工作
0 k, q' m& X$ ^1 e! [9 R4 r& w% b12-4 辅助模块单元测试 util 模块测试-
' m6 e6 [5 ^6 c12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试
* u ]( L$ Y' k0 A- W0 C( p0 d12-6 辅助模块单元测试 headers 模块测试% m, E7 F; Z9 T9 f8 q
12-7 辅助模块单元测试 url 模块测试 _3 m; d4 n9 S; X
12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
0 v' S1 x- y0 @- c12-9 header 模块单元测试 测试代码编写: |5 H6 g' z; |+ ]* ~
12-10 Axios 实例模块单元测试 测试代码编写
3 P. P( F7 b7 p2 f0 i4 N& S1 H12-11 拦截器模块单元测试 测试代码编写( N- J. n# `) y9 P
12-12 mergeConfig 模块单元测试 测试代码编写
. w+ `. q K9 Z: U4 `12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试, m$ |1 D8 w. Z3 u& _2 Y
12-14 剩余模块单元测试 defaults 模块单元测试! ]3 y8 a6 I( [4 u
12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试
6 s' {8 H) k/ Z12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试, \ |! ?6 O3 a, x9 c
12-17 剩余模块单元测试 补充未覆盖的代码测试0 {7 b# a) r6 L$ A9 s5 d
4 j. ^* F' c: E0 {4 c& z0 w, W2 o, J第13章 ts-axios 部署发布【向社区分享你的项目】
- b% z2 t3 ~5 u" K讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。1 q) F9 l$ F. E# b7 i. {+ J C
13-1 ts-axios 编译与发布 需求分析 + 编译和打包
: b* v( l# z% E$ x13-2 ts-axios 编译与发布 自动化部署: d9 F/ `9 w) r) D
13-3 ts-axios 编译与发布 运行部署脚本3 C" S7 g# X( s+ `; t8 y; N. Z
13-4 ts-axios 库 在 TS 和 JS 项目中引用' b8 S& w% \. W* G0 J& }+ U/ e: b
% @' m3 G" l$ x1 |7 T1 B第14章 课程总结【知识梳理，巩固加深】
3 h8 ]% e& f2 `% l) x& S! Q: S本次课程的整体回顾，总结学习的内容。% z# m2 W1 x/ C L2 d
14-1 课程总结 与回顾( f3 v, T* N8 _, W& j3 d& R! e6 A
2 c0 {2 {. T0 `; _# H4 ?2 m4 y8 Z
8 R/ S) Q* o* e) M" j% p〖下载地址〗
/ j; I7 o) B* k4 S1 V& a! ]# d' q3 H8 w `6 }+ e
* e/ B V# V* D" A* @/ f8 u& D0 ^9 K$ R' q" o2 e( R; x* g4 }
|
|
[复制链接]
在 TS 和 JS 项目中引用