|
|
TypeScript完全解读(26课时)
〖课程介绍〗:
TypeScript在2018年势头迅猛，三大主流前端框架中，Angular和React开始就是使用TS编写的源码，而Vue3.0将使用TS重写，重写后的Vue3.0将更好的支持TS，届时三大框架都可以很好的支持开发者使用TS开发。而现在几乎所有第三方JS库都有开源社区为之书写TS声明文件，所以即便是旧的项目也能够逐步过渡到TS开发。越来越多的库开始使用TS重写，越来越多的开源工具诸如VSCode等源码都用TS书写。2019年TypeScript将会更加普及，国内各大互联网公司，和中小型团队都开始尝试使用TS开发项目，TS也将会成为面试官喜欢提及的内容，能够熟练掌握TS，并使用TS开发过项目，将会为你的面试加分。
本套课程包含两大部分，第一部分是基础部分，也是重要部分，参考TS官方文档结构，针对内容之间的关联性和前后顺序进行合理调整。所讲内容基本覆盖TS所包含的所有内容，但是不拘泥于文档照搬，对一些不好理解，而文档中一句带过的内容，补充具体的示例，帮助大家理解；对于一些滞后的文档内容和一些错误示例进行修正，并将后面更新的新特性穿插到对应章节；在讲解基础知识的同时，穿插一些实际开发中的经验，帮助大家理解学习。第二部分实践部分，通过5种常见项目类型进行实际操练，将基础知识融入到实际场景中进行运用，帮助大家理解基础知识的实际使用场景，对学习和开发有重要帮助。8 K! z' k& o2 C; H* W% u! W. O
〖课程目录〗:* ^% T, D, w1 ^$ i3 b
1.搭建开发环境
2.基础类型
(1)布尔值7 X2 [- @3 Y/ e1 b
(2)数值
(3)字符串1 V' c: `# s* M0 ?# a
(4)数组
(5)元组
(6)枚举
(7)any
(8)void/ j# W% v! u- s- N
(9)null和undefined! v: u; w5 h! O- {
(10)never4 Q) q3 J# g. X& m; c; {3 u6 V
(11)object$ x' s/ ^5 A; l, B" E" _
(12)类型断言
3.【赠课】ES6精讲 - Symbol* ]) x7 n$ I9 f1 K% ~; W
(1)基础
(2)作为属性名9 {1 n9 N5 C- W3 }$ z; k S9 u6 ?1 Z
(3)属性名的遍历9 a/ ~% e2 q( l, p
(4)Symbol.for和Symbol.keyFor
4.接口2 l( b, W; `- G- t/ H5 k
(1)基本用法4 v& L* X* R% ]' T8 y1 m
(2)可选属性% L( L& u& F4 U; N8 K% O
(3)多余属性检查
(4)绕开多余属性检查2 c; y* u$ q; d! n2 q @
(5)只读属性+ {& e5 z2 p; {2 T# o: |3 N1 G. ?
(6)函数类型
(7)索引类型
(8)继承接口4 h, \& p, ? v, P/ o# J' Q" R
(9)混合类型接口
5.函数
(1)函数类型
) q4 z W& C6 F. O: A. b' }
i.为函数定义类型
ii.完整的函数类型, D& L& m6 U7 Y
iii.使用接口定义函数类型4 j1 N F7 r8 r& J
iv.使用类型别名
(2)参数8 x y+ {. S8 @: R# Z1 F
i.可选参数
ii.默认参数7 \4 r a0 f3 q1 Z; S. F. C6 k. z, T
iii.剩余参数1 f/ }7 \ [# Y7 V
(3)重载9 n* p6 I% n( w9 b8 r' a& P0 t: ?
6.泛型) M6 ?% @7 U& ]0 I( o* L7 a. N0 M
(1)基本用法6 ^' ]) l8 W" N9 G+ Z
(2)泛型变量
(3)泛型类型! g) i! p/ ^7 `% j9 p8 _
(4)泛型约束' S$ N4 L* z3 k9 ^
(5)在泛型约束中使用类型参数
7.【赠课】ES6精讲 - 类Class基础
(1)实现创建实例
(2)constructor方法
(3)类的实例
(4)取值函数和存值函数
(5)class表达式
(6)静态方法" |- N8 @$ x. X0 c
(7)实例属性其他写法
(8)静态属性
(9)私有方法
(10)私有属性& Y1 T9 Q6 ]$ |3 R% V
(11)new.target属性4 }0 t8 F2 d8 [1 Q% P
8.【赠课】ES6精讲 - 类Class继承
(1)ES5中的继承
(2)ES6中类的继承& X* d1 ^' o8 E' c& k
(3)Object.getPrototypeOf
(4)super
' q0 {9 ]; }- _+ C0 x% N
i.作为函数
ii.作为对象* j5 ~# _ E1 D
(5)类的prototype属性和__proto__属性) g! g/ R5 Y w
(6)原生构造函数的继承3 ^1 y3 M. @0 e. f5 Z0 h0 k. D
9.TS中的类
(1)基础, G% I( x. Z, g6 a! a; N% O
(2)修饰符* \ m2 V; @' D4 S+ _- J$ @
i.public
ii.private
iii.protected7 }$ S* G" |/ G# C: H! t) I6 \
(3)readonly修饰符
(4)参数属性
(5)静态属性
(6)可选类属性
(7)存取器: j" c* ~: `+ M
(8)抽象类
(9)实例类型
(10)对前面跳过知识的补充# J+ q! t0 G! q y" h- |, o
2 d, E/ B) C$ A' p
i.类类型接口& @5 h$ F, X/ G) M/ T( l
ii.接口继承类. |+ @" v6 r) @' T. J
iii.在泛型中使用类类型) \3 f8 d8 \/ P, v9 Z6 Y$ m; c
10.枚举, f& Y+ m& V) d5 @8 T" d) f
(1)数字枚举+ F7 |) C# j2 I
(2)反向映射
(3)字符串枚举7 w( p- G3 d5 p
(4)异构枚举9 l5 @2 N' D5 U, L
(5)枚举成员类型和联合枚举类型
(6)运行时的枚举+ G: }- S- U3 j
(7)const enum5 S' k. |! A* d1 H2 ^- q
11.类型推论和兼容性
(1)类型推论
4 P9 Z% \3 Q) A/ \
i.基础/ D. B8 i: w6 h7 E; ?1 K6 z
ii.多类型推论
iii.上下文类型
(2)类型兼容性2 A0 h2 B' {: z: D: ]$ G
i.基础
ii.函数兼容性) n8 v& K5 N( w4 l
1.函数参数个数4 n8 F N1 F1 d) x8 P) f, _
2.函数参数类型# x x" K2 r0 R% n$ r$ z" h) ]* z* U
3.函数返回值类型3 B% _: ?& f4 P/ B. ^; D9 k
4.可选参数和剩余参数* L* g9 j3 \$ J) n! _
5.函数参数双向协变
6.函数重载
iii.枚举兼容性
iv.类兼容性
v.泛型兼容性. U) \: l8 K, H2 a7 @1 _" z
12.高级类型 - 1
(1)交叉类型1 C6 B+ i% s" M0 _
(2)联合类型$ k3 Y' a" N) n$ O; k4 y
(3)unknown
(4)类型保护$ N% o9 f" x( k$ r( m% ^8 q
i.自定义类型保护
ii.typeof类型保护
iii.instanceof类型保护) @0 h2 e9 M" K# b2 s- E! F! ?
(5)null和undefined
" j" [/ D; D. B# H
i.严格模式6 `' ]# l/ t2 y2 I C7 s. B# [( F
ii.可选参数和可选属性
(6)类型保护和类型断言
(7)类型别名. @* G; n. H6 G+ ?
(8)字面量类型
# x! J8 g6 N( u3 C. v2 W
i.字符串字面量类型. A$ Z8 ^1 C1 `# F& Q
ii.数字字面量类型* b3 h2 L* ]2 u/ w! t4 Y! n. \
(9)可辨识联合7 B L+ C1 V7 {3 |) _' C
i.利用strictNullChecks
ii.使用never类型
13.高级类型 - 2
(1)this类型 u, |; B u! V
(2)索引类型
i.索引类型查询操作符
ii.索引访问操作符3 r8 g( W- @4 X L+ {3 m
(3)映射类型1 Q9 h+ |8 `6 R! y( Z8 ?
! N4 M$ W& Q c2 S+ x3 x7 ^
i.基础# |' B) G+ |5 b3 v4 G5 p; }
ii.由映射类型进行推断2 J, `9 m; j' ~. J; z, x7 Q
iii.增加或移除特定修饰符7 E" w2 b" |7 r' T# J
iv.keyof和映射类型在2.9的升级
v.元组和数组上的映射类型0 v& c- I6 V4 T3 u/ U3 G D
(4)条件类型
i.基础
ii.分布式条件类型
iii.条件类型的类型推断& ], R; {# K0 E* s# g
iv.TS预定义条件类型
14.【赠课】ES6和Node.js中的模块! x% b& u( s( u# _" e
(1)ES6的模块 R" N2 ]8 C% ]' D2 [
i.export; w& z, p& U6 [0 |' i
ii.import% x' Q" _9 i+ c3 h9 c/ ~2 P
iii.export default
iv.import和export的复合写法
v.import()2 \' g$ R. H3 [! q$ p
(2)Node.js的模块 V7 t- a& B9 B1 ?( b# [4 S; J1 k
0 n G" B1 A5 n8 G6 U: q. ]
i.exports
ii.module.exports
15.模块和命名空间7 O6 O \5 Y4 A( Z- g
(1)模块( c1 r/ p1 e; I3 m' p' Y! e8 N
i.export
ii.import
iii.export default
iv.export =和import xx = require()7 y8 }( f" f/ d( ~
(2)命名空间$ y4 {! _3 t3 ~
i.定义和使用 `% X( U- S& @+ n: T: N9 Q
ii.拆分为多个文件
(3)别名' c; ]9 Q. k% H% P/ O, x4 a
(4)模块解析
i.相对和非相对模块导入: R/ e5 [4 V; m- u, i- U5 R
ii.模块解析策略3 B7 J( H$ c ^5 v' I6 E( X& e
4 ?4 y2 }, E0 [: E: S) Z
2.Node模块解析策略 M; G, B7 A/ X9 t! A
iii.模块解析配置项
; n1 \! l& [5 G: s
1.baseUrl
2.paths& F/ D. t1 [ m% b6 Q8 {
3.rootDirs \5 O1 h+ O# E! m
4.traceResolution
5.noResolve- J& f1 {& O2 T
16.声明合并
(1)补充知识/ ?+ x4 q, h* C
(2)合并接口
(3)合并命名空间& o' m3 f$ I" L# n
(4)不同类型合并
i.命名空间和函数
ii.命名空间和枚举
17.装饰器
(a)基础) I; n. f& I' Q3 l
w; K* {9 h$ ]9 r! m
i.装饰器定义3 M5 g4 l: Z. s
ii.装饰器工厂
iii.装饰器组合+ l- x7 U6 s, i3 u2 P
iv.装饰器求值; ~$ W: r5 V) {0 z9 ]& `
(b)类装饰器, D; V9 N6 q1 I; r# v' [5 D4 t" V
(c)方法装饰器
(d)访问器装饰器3 }- }2 I8 a! \( I
(e)属性装饰器
(f)参数装饰器
18.Mixins, ~9 e' @+ D- i F$ t
19.其他重要更新
(1)async异步函数以及Promise
(2)tsconfig.json支持注释9 R2 q) L5 r# x" f4 O
(3)动态导入表达式
(4)弱类型探测: R4 [6 V6 Y; I' [, H2 E
(5)对 ... 操作符的更新
20.声明文件) ?4 C$ f' F9 Y3 B# ~" V
(1)识别已有JS库的类型) ^6 Z' b% p( K. {! r
+ H% r) Y3 \' j* }- y$ _
i.全局库
ii.模块化库: M( R+ V; g5 B% U% A
iii.UMD库
(2)处理库声明文件
i.模块插件或UMD插件
ii全局插件
iii.修改全局的模块5 p9 x; d# {0 K
iv.使用依赖
v.快捷外部模块声明 a' l1 W! L3 H' H; Y) ]
21.tsconfig.json配置详解
二、实践, j8 O8 e) C& V+ y
]$ l0 C7 g8 h+ K& k, l
22.封装并发布一个库# {7 K: j% u# y! ~8 O# [2 r
23.为第三方库写声明文件5 Q+ n4 t+ B# x' @9 s+ R
24.TS+NodeJS+Express搭建后端服务) j- ?* a! O: I8 D! l2 }
(1)搭建项目基础, H$ D8 r! [6 _/ U
(2)使用jade模板渲染页面
(3)使用mysql数据库: y( E0 C* h8 J9 ]8 y( k
(4)实现文件上传$ x5 j5 N. w1 o- ?7 s2 D( G
25.TS+Vue开发一个Todo应用
(1)使用Vue-Cli3搭建项目
(2)实现逻辑
(3)优化样式* i- [8 {/ F8 F) |$ [
26.使用TS封装并发布一个Vue组件
|
|
发表于 2020-5-6 17:15:38
发表于 2020-5-6 17:49:48
发表于 2020-5-6 18:35:32
