第四课 TypeScript的高级数据类型 | 青训营笔记

83 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天。

在学习完对TypeScript和JavaScript的分析后,我们进一步深入的学习TypeScript高级类型和一些常见的解决方案,我们在日常的前端开发过程中可以通过高级类型的方式将普通类型的解决方案进行高级化。本节课重点是学习联合交叉类型类型保护与类型守卫Merge函数类型实现函数返回值类型TypeScript工程应用

联合/交叉类型

为书籍列表编写类型

3.jpg

类型声明繁琐,存在较多重复

4.jpg

  • 联合类型:IA | IB;联合类型表示一个值可以是几种类型之一
  • 交叉类型:IA & IB;多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性

3.jpg

4.jpg

类型保护和类型守卫

3.jpg 上图中的代码如果是在JavaScript中运行时完全没有问题的,但是如果是在TyprScript中就会报错,报错内容为类型“IA | IB”上不存在属性“a”。 类型“IB”上不存在属性“a”。所以可以得出结论,当我们访问联合类型时,处于程序安全,仅能访问联合类型中的交集部分。而如果想让他在TypeS cript中正常运行,我们需要改造代码如下图

3.jpg 通过类型守卫的方式来进行改造,需要额外定义一个函数,同样接受一个参数,在返回值的地方加入了新的语法——类型谓词

类型守卫:定义一个函数,它的返回值是一个类型谓词,生效范围为子作用域。

4.jpg

联合类型+类型保护=自动类型推断

高级类型

merge函数类型

3.jpg

4.jpg 这样写的问题有两处一种是类型实现较为繁琐,如果方法类型比较复杂,name我们声明source和target需要大量重复两遍,另一种是容易出错,如果target增加或者减少key,就需要source联动去除。所以我们可以通过泛型的方式去优化。

3.jpg

关键字【in】,相当于取值字符串面量中的一种可能,配合泛型P,表示每个key。

关键字【?】,通过设定对象可选选项,即可自动推导出子集类型。

函数返回值类型

3.jpg

4.jpg

工程应用

web

3.jpg

Node

4.jpg