深入TypeScript,学习其高级数据类型 | 青训营笔记

33 阅读2分钟

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

今天主要学习了JavaScript中的一些高级数据类型

联合/交叉类型

image.png

1.交叉类型

交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。 例如, Person & Serializable & Loggable同时是 Person 和 Serializable 和 Loggable。 就是说这个类型的对象同时拥有了这三种类型的成员。

2.联合类型

联合类型与交叉类型很有关联,但是使用上却完全不同。

在传统的面向对象语言里,我们可能会将这两种类型抽象成有层级的类型。 这么做显然是非常清晰的,但同时也存在了过度设计。 padLeft原始版本的好处之一是允许我们传入原始类型。 这样做的话使用起来既简单又方便。 如果我们就是想使用已经存在的函数的话,这种新的方式就不适用了。

代替 any, 我们可以使用 联合类型做为 padding的参数:

/**
 * Takes a string and adds "padding" to the left.
 * If 'padding' is a string, then 'padding' is appended to the left side.
 * If 'padding' is a number, then that number of spaces is added to the left side.
 */
function padLeft(value: string, padding: string | number) {
    // ...
}

let indentedString = padLeft("Hello world", true); // errors during compilation

联合类型表示一个值可以是几种类型之一。 我们用竖线( |)分隔每个类型,所以 number | string | boolean表示一个值可以是 number, string,或 boolean

如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员

类型保护与类型守卫

image.png

类型守卫

image.png

image.png

高级类型

image.png

image.png

函数返回值类型

image.png image.png

工程应用

以Web 场景为例,介绍 TypeScript 的工程应用————Webpack

image.png

总结

在完成对 TypeScript 与 JavaScript 的分析后,认识了 TypeScript 高级类型,学习了如何通过高级类型的方式,将普通类型的解决方案进行高级化。在课程最后,以Web 场景为例,介绍了 TypeScript 的工程应用。