【web前端】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开发过项目，将会为你的面试加分。  o% n7 2 1 ~5 L! L0 k

        本套课程包含两大部分，第一部分是基础部分，也是重要部分，参考TS官方文档结构，针对内容之间的关联性和前后顺序进行合理调整。所讲内容基本覆盖TS所包含的所有内容，但是不拘泥于文档照搬，对一些不好理解，而文档中一句带过的内容，补充具体的示例，帮助大家理解；对于一些滞后的文档内容和一些错误示例进行修正，并将后面更新的新特性穿插到对应章节；在讲解基础知识的同时，穿插一些实际开发中的经验，帮助大家理解学习。第二部分实践部分，通过5种常见项目类型进行实际操练，将基础知识融入到实际场景中进行运用，帮助大家理解基础知识的实际使用场景，对学习和开发有重要帮助。- W/ i' o+ d3 L, W

                  " j5 d! ?& Y6 r* h5 q5 m

〖课程目录〗:

        1.搭建开发环境2 D/ ]( F5 K/ ^6 M- ?

        2.基础类型! _( j4 ]3 u' {, V# v; E* z

        (1)布尔值

        (2)数值

        (3)字符串2 A7 {" }2 W6 s0 `

        (4)数组: i) u/ E, X/ x6 D5 a" v* u

        (5)元组% z- G* E8 i& |) ~- z7 o" q

        (6)枚举: q  b! F1 w4 M, m5 `6 Y9 M' A- d

        (7)any- @+ _- V1 W# y# U! O- |

        (8)void

        (9)null和undefined

        (10)never

        (11)object

        (12)类型断言& D9 z, |( W% F

        3.【赠课】ES6精讲 - Symbol

        (1)基础$ N* 9 {- U$ v' U6 p0 I2 K

        (2)作为属性名

        (3)属性名的遍历% K. [- ?' b2 f% ^/ d  z

        (4)Symbol.for和Symbol.keyFor

        4.接口, q! D1 v; F  g2 U

        (1)基本用法

        (2)可选属性

        (3)多余属性检查* M- P5 z/ U  u/ F

        (4)绕开多余属性检查4 U8 c3 ^$ _* T5 f4 s* M& K/ X

        (5)只读属性

        (6)函数类型

        (7)索引类型+ s# U* s; G" a

        (8)继承接口

        (9)混合类型接口9 C( s: c9 U/ C7 b* m, k

        5.函数3 I  z' d2 T& L: g7 u9 ?. @7 Q: Y( u

        (1)函数类型  ?' J# s# w$ l4 I5 r3 Y/ f

! ]% A5 y7 q# b# q

        i.为函数定义类型

        ii.完整的函数类型* n& B! Q+ m( i& Z3 z: ]

        iii.使用接口定义函数类型0 }5 T1 s, P' N

        iv.使用类型别名

        (2)参数

        i.可选参数  [7 k! S) M" c3 _

        ii.默认参数9 `4 Y7 d' v% s1 `# R

        iii.剩余参数

        (3)重载

        6.泛型! _$ H7 F& z. p, O: X9 D

        (1)基本用法

        (2)泛型变量3 ?7 w+ j: J6 o; r( w$ A

        (3)泛型类型# N. v* V9 Y4 Q1 M% w4 j$ g$ Z

        (4)泛型约束

        (5)在泛型约束中使用类型参数

        7.【赠课】ES6精讲 - 类Class基础

        (1)实现创建实例8 b1 X" j* }' ~9 B- t% T  T

        (2)constructor方法

        (3)类的实例

        (4)取值函数和存值函数$ D. L2 f6 A( Y9 K3 c4 M1 f

        (5)class表达式

        (6)静态方法& j; P% f# `! _% G) ^: d

        (7)实例属性其他写法4 k( J( S8 l5 p( Q/ ]5 ~) r

        (8)静态属性

        (9)私有方法* z: v5 w$ ?4 d& s* x2 B8 [

        (10)私有属性

        (11)new.target属性5 e: {4 U+ y, P1 p0 ]- U5 ~" p4 Q

        8.【赠课】ES6精讲 - 类Class继承

        (1)ES5中的继承8 l! T6 u5 E0 e% Z# P

        (2)ES6中类的继承- t& k7 u  f+ K+ z

        (3)Object.getPrototypeOf

        (4)super: b8 N6 d1 Q# H- Y9 M# A8 c: f

  w$ u& W* P! e/ Y) s

        i.作为函数

        ii.作为对象5 b  c6 B- f( r& K: q. Y- @8 R

        (5)类的prototype属性和__proto__属性9 q# H" i% m* d6 Q1 y9 h

        (6)原生构造函数的继承

        9.TS中的类9 O' j) v. k7 H- r- t

        (1)基础. x  N; e% y6 [! d  K

        (2)修饰符

        i.public- e  M, w* {! P6 k- d2 Y

        ii.private' i- D0 @9 R- L: b7 P, s

        iii.protected

        (3)readonly修饰符; v/ r& u( g, m- Q

        (4)参数属性

        (5)静态属性, j9 M" h- @2 V. I% s( b" c7 @

        (6)可选类属性) |' $ s: j! K

        (7)存取器3 h; O0 N4 w2 ]

        (8)抽象类

        (9)实例类型1 v" L9 z5 l; b  m$ Z8 q

        (10)对前面跳过知识的补充

9 c  Q( ~; B' U; d+ p5 q( ~

        i.类类型接口4 c4 m& g0 ^. N5 h

        ii.接口继承类

        iii.在泛型中使用类类型

        10.枚举

        (1)数字枚举$ d+ P8 {% x: n: W/ ?

        (2)反向映射' a( z% `/ g+ m8 F& U) {. d

        (3)字符串枚举: S* a4 s# p% B( ]( J9 J

        (4)异构枚举

        (5)枚举成员类型和联合枚举类型

        (6)运行时的枚举' i, m! b# t+ n% q" y( ^6 X

        (7)const enum+ o2 z6 s' ?6 f6 L+ a1 G, C! z) ]

        11.类型推论和兼容性

        (1)类型推论7 n, l# W9 G4 W

        i.基础4 U. i/ K$ Y# y' z$ _# g

        ii.多类型推论

        iii.上下文类型3 ~( M; d# L$ n( Q

        (2)类型兼容性

4 H' H  z$ C- ~: J0 c: n7 w

        i.基础

        ii.函数兼容性

        1.函数参数个数

        2.函数参数类型

        3.函数返回值类型2 ^5 I- % F7 S( [! m

        4.可选参数和剩余参数/ W3 ^, e9 b! k5 P+ B! m! q

        5.函数参数双向协变

        6.函数重载

        iii.枚举兼容性6 _1 h0 f6 N6 Q5 T! i

        iv.类兼容性6 O* k; F* k' e7 j6 w2 |# K( T

        v.泛型兼容性& A1 R( ~6 P( d. x* C

        12.高级类型 - 1

        (1)交叉类型

        (2)联合类型" p8 i; x- i6 k/ ~2 a9 S& Q* b: Z

        (3)unknown

        (4)类型保护: z3 O7 X. c; N- c; @) R

        i.自定义类型保护

        ii.typeof类型保护% c  o3 z# W2 E+ z. `

        iii.instanceof类型保护

        (5)null和undefined

- B3 P* G, @, [$ V: h! M

        i.严格模式

        ii.可选参数和可选属性/ f% e: _3 S" i/ m

        (6)类型保护和类型断言! R: t  ]5 m- N3 ~5 {* k& g

        (7)类型别名

        (8)字面量类型  W, |) j/ b9 e. e3 P; w

        i.字符串字面量类型5 `- m, k7 q* R

        ii.数字字面量类型# L' J5 G0 s) ^7 G; j  n

        (9)可辨识联合+ ^, O2 F9 `- k9 F$ j

% V7 B. N" R/ L

        i.利用strictNullChecks

        ii.使用never类型. Z1 a, x" v' D$ X" Y- P

        13.高级类型 - 2

        (1)this类型

        (2)索引类型

        i.索引类型查询操作符

        ii.索引访问操作符# r# P4 a' b& D, F

        (3)映射类型4 b* ~; H  k) q  l" L

9 M! N/ {2 w' e. U

        i.基础# x, v. w2 s1 @5 N. g" L2 Z

        ii.由映射类型进行推断

        iii.增加或移除特定修饰符6 & W8 D& z8 z8 E

        iv.keyof和映射类型在2.9的升级

        v.元组和数组上的映射类型( D4 m! |. T- ]& w

        (4)条件类型6 P3 V1 x" d) z6 W1 _

        i.基础

        ii.分布式条件类型3 `  p; 6 Q/ }( C/ d4 _

        iii.条件类型的类型推断8 L) y, A- W% P9 ^( q% I( v

        iv.TS预定义条件类型

        14.【赠课】ES6和Node.js中的模块" ]: ?3 [" c/ k) J# s8 c# d

        (1)ES6的模块

6 ; _" p4 R5 w3 S

        i.export; T/ ?2 A2 j5 [) [/ @+ C

        ii.import9 _9 B4 W/ ^4 {. |' H! l

        iii.export default- X% Q8 }$ C9 I$ n. t1 l

        iv.import和export的复合写法) W' s+ ]8 H- A. H

        v.import()

        (2)Node.js的模块

        i.exports

        ii.module.exports+ N  v% y. t9 C

        15.模块和命名空间7 a4 T: o* I4 m1 Y, M6 N' K7 Z7 _

        (1)模块

        i.export

        ii.import

        iii.export default( A) x1 a$ d! a: X8 j

        iv.export =和import xx = require()

        (2)命名空间  [; O8 E- C  M6 l1 _

5 |4 o' y5 z1 y/ v3 s% D

        i.定义和使用% E7 L1 U9 g8 h

        ii.拆分为多个文件

        (3)别名

        (4)模块解析

        i.相对和非相对模块导入

        ii.模块解析策略

# q: [9 d7 n! D/ x' z

        1.Classic模块解析策略]4 h' Q) }( w8 _8 N% ?+ X

        2.Node模块解析策略6 k' `; c3 W% P  P9 M

        iii.模块解析配置项

  ?1 y6 L# v1 o7 |  F, o  z5 _

        1.baseUrl  Y0 E- G% P, L! n( K

        2.paths" Q3 [- w: ?" G" f

        3.rootDirs

        4.traceResolution

        5.noResolve

        16.声明合并3 l2 x  d$ Y, t( ?$ L6 E! P2 @

        (1)补充知识5 M$ z$ ; G! i8 w9 |

        (2)合并接口

        (3)合并命名空间! c& c  f4 [7 `, f7 r

        (4)不同类型合并  {" S( i! @' Y# B* N! ~

4 ~2 {+ `; f" ~; E9 H9 T

        i.命名空间和函数

        ii.命名空间和枚举" B* A. w* N, Y) s4 D& p+ q% U

        17.装饰器

        (a)基础; i3 S6 p2 v* x8 i

        i.装饰器定义

        ii.装饰器工厂8 r5 a+ K3 M, n8 U) c5 p: [, a& ?

        iii.装饰器组合

        iv.装饰器求值5 G: Q/ F' i4 F, E+ K* o: I7 P

        (b)类装饰器7 v' x7 q" `  c( k5 `+ y

        (c)方法装饰器

        (d)访问器装饰器* s, b1 d& T- d  H

        (e)属性装饰器* V4 |& [* G% ~2 `/ V* T

        (f)参数装饰器2 y1 ^1 ^; j9 d9 z+ e7 {6 B6 F: F

        18.Mixins

        19.其他重要更新2 I7 o( A( N8 g9 `# L) x

        (1)async异步函数以及Promise

        (2)tsconfig.json支持注释# l, n" n$ s+ m

        (3)动态导入表达式/ Q/ X, C& m3 U# h7 t

        (4)弱类型探测  ~" Z( y$ y& X8 W7 H8 k6 ?

        (5)对 ... 操作符的更新

        20.声明文件

        (1)识别已有JS库的类型

        i.全局库7 _/ q" V  D4 h$ h; ~* l* y

        ii.模块化库% T/ f" P0 l8 W9 p: k3 |3 C6 s6 [

        iii.UMD库

        (2)处理库声明文件) n% `1 V/ L1 c7 Y+ A. p

2 T! E2 w  Q7 v

        i.模块插件或UMD插件& x+ m! d( p+ [% K: U6 r

        ii全局插件2 j% m  u+ A5 g6 C

        iii.修改全局的模块

        iv.使用依赖; @$ M8 q! X( o* q1 ^8 n

        v.快捷外部模块声明( ], w. v, _. O2 o4 @* h

        21.tsconfig.json配置详解. w0 `: H. J! I% v* ]7 x) }

        二、实践1 r& X4 B1 @' D+ x  c! c

) O4 o% E5 |9 Z

        22.封装并发布一个库

        23.为第三方库写声明文件; q7 R# O% Q6 p

        24.TS+NodeJS+Express搭建后端服务% ]2 i: S0 `4 e9 M

        (1)搭建项目基础1 a  t( I- f" v9 u) s7 R5 `) t3 O

        (2)使用jade模板渲染页面. n8 c* T0 B; E  g

        (3)使用mysql数据库. ]( x2 [7 h7 z" n9 q

        (4)实现文件上传, h8 H4 R0 [5 W# T" V

        25.TS+Vue开发一个Todo应用

        (1)使用Vue-Cli3搭建项目* J9 D* i5 [8 g) J( y1 j! u* M, A* ~

        (2)实现逻辑$ q. W8 F  L( H* e  T: H

        (3)优化样式

        26.使用TS封装并发布一个Vue组件