2 {: }: c; X$ A% L5 y1 O
9 z* p. F$ H7 g$ L1 D! m0 p* J
〖课程介绍〗6 V6 Q! T* W! O) G: D+ U0 L" L
TypeScript是前端的发展趋势，但是很多同学却缺少实战经验，而且市面上缺少TypeScript 的实战课程。本课程首先讲解TypeScript的一些基础语法和常见用法，接着带同学们使用TypeScript一步步去实现一个完整的axios JS库，然后进行完整的单元测试，最后把开发的JS 库打包并发布到npm上。通过课程学习完全掌握axios的实现原理，修炼原生JavaScript内功，提升个人职场竞争力。9 C; A; B9 |' b6 Q* ^, I% @& u! u5 Z. j- p+ z- l H, U
, y4 x" E' \$ r8 I1 k3 o
' Q% c. I: Z- I〖课程目录〗. A% O$ C1 _ K# d& M3 p# E/ t' B( F
第1章 课程介绍【悄悄告诉你，一定要看，有福利】
4 G: k5 A" y: i% b! S$ n' p& ^6 x d介绍本课程的主要内容，通过本次课程可以学到的知识点，学习方法介绍。
' z! e3 I J2 L! x5 A- l1-1 课程介绍 试看6 f0 X+ I# J6 C8 }% k( D2 \" V
; C6 Q0 K. J; k/ S4 J: y& u第2章 初识 Typescript【初次体验】
" v# s+ } }; s+ Z教会同学们安装 Typescript 编译器，以及通过编写第一个 TypeScript 程序认识 TypeScript。
. {8 V- M" `; J/ }" v4 J! c3 a2-1 安装 TypeScript
! Q/ c% i; h, x: u( q# X2-2 编写第一个 TypeScript 程序 试看' A7 a$ @ q& w" M: @2 a
6 O/ j0 v: l4 C7 ]第3章 Typescript 类型系统【必备基础，牢固掌握】6 P2 f+ o/ C1 G8 Q. T
参考官方文档，主讲 TypeScript 的一些重要的语法和概念，并配合一些具体的代码示例辅助说明，帮助同学们了解 TypeScript 的常见用法，为之后的实战打下基础。1 N( f6 R. S2 s4 j5 m4 d% n
3-1 基础类型（上）
( J' X- P8 g0 _$ w# L3-2 基础类型（下）
7 b$ C5 }) k( f) [( _# C3-3 基础类型（注意版本报错问题）4 N( q9 E" v3 K) L1 n: b
3-4 变量声明 - var 声明1 H, U. C0 P) F, u- q/ c2 y' B; |
3-5 变量声明 - let 声明
T6 a, S. y5 L) {# G* P) C3-6 变量声明 - const 声明
2 R) P$ i1 g8 s. p: d# I3-7 变量声明 - 解构! e; v4 r2 ~5 S0 b7 Q7 V
3-8 变量声明 - 展开+ \4 }# X& n3 [8 C( R7 W; x
3-9 接口 - 接口初探( r2 ~, t# y% L3 [+ m2 l0 [* S
3-10 接口 - 可选属性+只读属性3 C* h5 \% U2 P! C0 x, l
3-11 接口 - 额外属性检查+函数类型+可索引的类型/ r: G v* @- Z. W0 H* L
3-12 接口 -类类型+继承接口+混合类型+接口继承类
4 U$ f7 t8 f9 r7 u" U k, a) m3-13 类 - 基本示例+继承& t% G+ c8 i U+ _) V
3-14 类 - 公共，私有与受保护修饰符+ readonly 修饰符
# c5 k9 C5 q2 I# f6 |2 A& D3-15 类 - 存取器+ 静态属性
2 E0 }+ q( \/ t( }+ e, ~3-16 类 - 抽象类+ 高级技巧% o* I5 B: X4 z5 Z, j/ E4 m# Y
3-17 函数 - 基本示例+ 函数类型
+ N/ r( @5 E2 y; D; |& c6 P3-18 函数 - 可选参数和默认参数- s9 b4 V7 w" l3 A) ]
3-19 函数 - this+ 重载
! C' ]; e& G7 D+ M# R4 b3-20 泛型 - 基本示例+ 使用泛型变量+泛型类型
9 r' F6 O* C* m! j3-21 泛型 - 泛型类+泛型约束
2 z4 ?. d" V2 \2 e# n3-22 类型推断 - 基础+ 最佳通用类型+ 上下文类型
" O( c1 Q4 F x) `0 m3-23 高级类型 - 交叉类型4 z. K' B. F7 @- N E( O3 B `
3-24 高级类型 - 联合类型5 g" h, W8 K0 C# W
3-25 高级类型 - 类型保护
0 B2 n" j: m$ J" B. \% Q3-26 高级类型 - 可以为 null 的类型+ 字符串字面量类型
: {3 K. W! f$ h |
6 E$ `2 Z2 P6 k; b. z& K第4章 ts-axios 项目构建【工欲善其事必先利其器】
. F4 o& H/ i* r0 A C# @4 H* Z分析 axios 项目的重构需求，使用 typescrpit-library-starter 脚手架初始化项目，并编写基础请求的代码，搭建整个 demo 的架构方案。
2 p% W" ?. B4 a& O+ w/ `8 I" Q4-1 需求分析1 i# V" F- w/ m1 {' ?+ ?
4-2 初始化项目 - 创建代码仓库% ]( ?1 y" L; }9 h+ r" G
4-3 初始化项目 - TypeScript library starter: k. W# u _2 v" p% @$ U/ `- ? W) G
4-4 初始化项目 - 关联远程分支
9 w" V: g9 ?# F; B8 i; O( i4-5 编写基础请求代码 - 创建入口文件
: J# f" e& y6 c0 W4-6 编写基础请求代码 - 利用 XMLHttpRequest 发送请求0 ^" P% C) ]3 p) V1 S6 b6 |
4-7 编写基础请求代码 - demo 编写) S( l7 `0 o+ h6 ^' u0 g
: F3 v* }# ?$ w) n" M* w第5章 ts-axios 基础功能实现【核心流程】+ ?3 ^0 a' A2 b% O# W5 {/ {! R
实现 axios 的基础功能，包括对请求 url、data、header 以及响应 data、header 的处理。* H4 B! ?. P" R4 f, g# v+ [
5-1 处理请求 url 参数 - 需求分析2 p9 {: R' B: {0 {' n7 a, \) p
5-2 处理请求 url 参数 - buildURL 函数实现
1 {& V! s# K& ^" j8 C* P8 w5-3 处理请求 url 参数 - 实现 url 参数处理逻辑
$ h. W) [9 f. n# i5-4 处理请求 url 参数 - demo 编写. a: d7 H9 D3 X6 u8 \
5-5 处理请求 body 数据 - 需求分析+ 实现 试看
1 M6 W, B0 L! ^/ x& }* ]5-6 处理请求 header - 需求分析
1 O4 R0 Y, @0 y7 |$ \ m5-7 处理请求 header - processHeaders 函数实现
- |' U& s, M7 A. y! M" c2 e7 g. i5-8 处理请求 header - 实现请求 header 处理逻辑
6 i* [0 u* X7 e4 d5-9 处理请求 header - demo 编写* ?1 z! |$ v* m9 G7 j
5-10 获取响应数据 - 需求分析+实现
- z, m' b0 S% t! f# y: |; ^5-11 处理响应 header - 需求分析+ parseHeaders 函数实现及应用/ b9 Q9 h4 [& X. i5 k- Z& t
5-12 处理响应 data - 需求分析+ transformResponse 函数实现及应用
% d% E# T/ v: Z+ C
a: Q+ U) O3 [! b# P第6章 ts-axios 异常情况处理【不可忽视的边界条件】. W5 {1 B6 S: G2 R d
处理 axios 请求的一些异常情况，包括网络错误、请求超时，构造一个信息增强错误处理类。1 d, V' |: t- R8 q2 d1 h" @5 i' o
6-1 错误处理 - 需求分析# T# F) w' ?2 `
6-2 错误处理- 网络错误+超时错误+非200状态码+demo. M8 v5 g/ L( Q; J
6-3 错误信息增强 - 需求分析
4 a6 _) o6 u+ ?* b5 c" T6-4 错误信息增强 - 创建 AxiosError 类% h! x( H- T1 x% j
6-5 错误信息增强 - createError 方法应用+ 导出类型定义3 [2 S. O( R2 b3 [$ T$ g
9 g# N3 X- T' \& b第7章 ts-axios 接口扩展【工厂模式的合理运用，设计思想的转变】
; P% ]# [- U& P" C把 axios 从普通函数实现到通过工厂模式类的设计转变，并扩展更多调用接口，把 axios 变成了一个 混合对象，以及让响应数据支持泛型。0 i- j4 q- C2 b0 r
7-1 -1 扩展接口 - 需求分析
9 J( ]8 W0 n6 t* S7-2 -2 扩展接口 -接口类型定义+ 创建 Axios 类
' }' b: Q$ ~3 A' J+ d; T1 t7-3 -3 扩展接口 - 混合对象实现+ demo 编写9 T4 @( v2 U/ b7 P t- G: q0 A6 [
7-4 -1 axios 函数重载 - 需求分析+ 重载实现+ demo 编写% {' x7 D- X6 A0 Q. R& R! w: v# M
7-5 -1 响应数据支持泛型- 需求分析+ 接口添加泛型参数+ demo 编写3 H: m$ Z9 ^; h$ A+ F* p2 q
' J9 ^! A' |% H! o, W0 p% z
第8章 ts-axios 拦截器实现【巧妙运用 Promise 链式调用】
3 r# x; K6 u- P6 t实现 axios 的拦截器功能，对整个实现做了详细的设计，最后实现拦截器管理类以及链式调用逻辑。# g2 @* l! u; K
8-1 -1 拦截器的设计与实现 - 需求分析+ 整体设计
! p/ c! n! r5 p0 H6 V8-2 -2 拦截器的设计与实现 - 拦截器管理类实现
$ |: B- k5 @- F# ~- \8-3 -3 拦截器的设计与实现 - 链式调用实现
6 i' N' y9 d1 q' b4 |0 F# s8-4 -4 拦截器的设计与实现 - demo 编写, S; Z2 D5 v$ |6 A, Z
; O5 g/ g- S! |# e2 ^
第9章 ts-axios 配置化实现【巧妙运用策略模式实现配置合并】1 p$ c1 m0 }* e9 |* @% q" v, W1 v: `2 F
让 axios 支持一些默认配置，实现了配置的合并，根据不同的属性采用不同的合并策略，并且扩展了 axios.create 方法扩展默认配置，生成新的实例。
: R5 X$ N; A" b- K( }' N, x3 l9-1 合并配置的设计与实现 - 需求分析 + 默认配置1 l' C+ O- C7 G' c3 |9 H
9-2 合并配置的设计与实现 - 配置合并策略（上）0 H/ P# S2 g5 O) ?! \% H
9-3 合并配置的设计与实现 - 配置合并策略（下）" T0 s( M. Y! w9 r @5 a
9-4 合并配置的设计与实现 - flatten headers + demo 编写 O- J j5 d" `# ]
9-5 请求和响应配置化- 需求分析+ 修改默认配置
" W/ J7 N" x( y' o3 Q9-6 请求和响应配置化- transform 逻辑重构 + demo 编写 k: [' F9 f8 J
9-7 扩展 axios.create 静态接口 - 需求分析+ 静态方法扩展+ demo 实现
8 q4 x6 O" X; `( x8 b2 j
( m/ |% Y, [, J4 L7 a7 O第10章 ts-axios 取消功能实现【巧妙运用 Promise 实现异步分离】+ o# V" t: `# ]* C+ T1 H% \
实现 axios 的取消功能，包括对取消接口的设计，CancelToken 类的设计与实现。5 D. i' [ b8 W' |, f$ }7 W
10-1 -1 取消功能的设计和实现 - 需求分析+ 异步分离的设计方案8 G7 F; U) l* @
10-2 -2 取消功能的设计和实现 - CancelToken 类实现+ 扩展静态接口% h9 m2 d2 G3 x" i7 L& B9 F. V
10-3 -3 取消功能的设计和实现 - Cancel 类的实现及 axios 的扩展+ 额外逻辑实现 N! ]' l% m c' I1 n( ]# W
10-4 -4 取消功能的设计和实现 - demo 编写
0 r, c& L. S% j! v ]' @4 r. I( v: x! v
第11章 ts-axios 更多功能实现【锦上添花】; {6 G6 L6 X( z2 H' _! q! T5 B
实现 axios 更多的功能，包括 XSRF 防御、上传、http 认证授权、withCredentials、自定义参数序列化、自定义合法状态码、自定义合法状态码等，百分百实现官方 axio 在浏览器端的功能。
7 N/ T& K7 c$ [: C% k11-1 withCredentials 需求分析&代码实现& demo 编写
- H( U( l/ S# J% o% I* \11-2 xsrf 防御 - 需求分析
/ i% E3 _9 w# o0 S% ~11-3 xsrf 防御 - 代码编写- m4 a5 f6 f1 s7 \, p/ I7 x$ {
11-4 xsrf 防御 - demo 编写" C( E2 F0 X; q9 M/ y: r; Y& d! l0 \
11-5 上传和下载的进度监控 需求分析+ 代码实现
! ]7 o) X! T. S: ^+ ?& F11-6 上传和下载的进度监控 demo 编写
5 }( u9 o# Y7 v3 [. i11-7 HTTP 授权 需求分析+ 代码实现 + demo 编写
( ]. u/ o2 J+ C. M: E; f11-8 自定义合法状态码 需求分析+ 代码编写 + demo编写2 E- Q6 F4 h, i1 S
11-9 自定义参数序列化 需求分析+ 代码编写 + demo编写
2 I! F5 D7 i4 H) J, a11-10 baseURL 需求分析+ 代码编写 + demo编写9 X- h- T" c% `. P6 ^! W2 o
11-11 静态方法扩展 需求分析+ 代码编写 + demo编写
6 p) H, |" \3 S9 r' C9 e, C5 x9 X! l, ^( { q; u. y# l2 o! a
第12章 ts-axios 单元测试【保障代码高质量】
" o% V( A" t) w/ m1 r) i% M先介绍单元测试，再讲解测试环境搭建，最后完整的实现整个 axios 库的单元测试，保证测试覆盖率达到 99%
! w2 D; N/ q( I, n12-1 前言" b% l7 T: F( _, j5 K, @' w4 a& J
12-2 Jest 的安装和配置 Jest 安装9 V) j6 Z5 X% F }* |2 X" B$ h
12-3 辅助模块单元测试 准备工作, d/ y5 \: `9 @% y7 B, V- E
12-4 辅助模块单元测试 util 模块测试-
& G% b1 [, H/ Z+ d4 C/ b8 p12-5 辅助模块单元测试 cookie 模块测试 + data 模块测试 + error 模块测试& e; v5 I% N% a0 c) H, a8 J2 ~
12-6 辅助模块单元测试 headers 模块测试
1 u, l# n7 g! W3 { x, ?$ Z* A+ g12-7 辅助模块单元测试 url 模块测试
# y v+ s6 G+ q12-8 请求模块单元测试 jasmine-ajax + 测试代码编写
" V7 V6 e2 R# r12-9 header 模块单元测试 测试代码编写
, u8 @; {" }9 J: @- v: K! i12-10 Axios 实例模块单元测试 测试代码编写' t+ s: x3 M% x4 d
12-11 拦截器模块单元测试 测试代码编写/ J z! Z" l0 u1 K) B
12-12 mergeConfig 模块单元测试 测试代码编写5 G, [+ @5 ?0 |5 z. o$ E
12-13 请求取消模块单元测试 Cancel 类单元测试 + CancelToken 类单元测试 + Cancel 业务逻辑单元测试: ^. g* N* W4 T6 S R
12-14 剩余模块单元测试 defaults 模块单元测试
4 `2 ]# z: a; [12-15 剩余模块单元测试 transform 模块单元测试 + xsrf 模块单元测试6 w# `. H6 q. T, E+ ~4 d2 [) D
12-16 剩余模块单元测试 上传下载+HTTP 授权+ 静态方法模块单元测试3 N$ i. g- |* h# g2 ` T2 H
12-17 剩余模块单元测试 补充未覆盖的代码测试- d/ {' U6 E; w; @) G- q0 G
9 i2 d4 L2 e6 |- Y2 }6 j6 s$ t
第13章 ts-axios 部署发布【向社区分享你的项目】
+ m8 C- D0 {' `$ U. Y) r讲解 ts-axios 库的部署和发布，使用 Rollup 编写部署构建脚本，使用 semantic-release 管理版本和发布。
; k4 n) u- j% _& f0 n+ \13-1 ts-axios 编译与发布 需求分析 + 编译和打包3 L8 h, j0 r- w7 d# ^6 L( e
13-2 ts-axios 编译与发布 自动化部署
9 ]- @4 d; Q8 m. ?13-3 ts-axios 编译与发布 运行部署脚本
; E/ \3 i( h8 o3 K( W8 j13-4 ts-axios 库 在 TS 和 JS 项目中引用1 {0 Z% i( I( O9 ?# j$ F) p# q
# U, N! n* p7 B第14章 课程总结【知识梳理，巩固加深】
; w- y5 F7 B4 Q/ _1 N" R: f5 _( I本次课程的整体回顾，总结学习的内容。+ _3 z, i4 K: k7 w
14-1 课程总结 与回顾
7 T0 G( E6 m, m7 G3 V/ \, m s5 ~
5 P; Z' H8 X4 t4 t; l( F. h$ V3 f0 i* d
〖下载地址〗
; i2 K' y! H1 ?1 z7 p8 w9 e$ f, ^% B% `+ T" `$ }' c
0 L$ Q+ v( \% Y& Q" |9 `: v7 c7 t3 ^" n
|
|
[复制链接]
在 TS 和 JS 项目中引用