这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
今天主要学习了JavaScript中的一些高级数据类型
联合/交叉类型
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
。
如果一个值是联合类型,我们只能访问此联合类型的所有类型里共有的成员
类型保护与类型守卫
类型守卫
高级类型
函数返回值类型
工程应用
以Web 场景为例,介绍 TypeScript 的工程应用————Webpack
总结
在完成对 TypeScript 与 JavaScript 的分析后,认识了 TypeScript 高级类型,学习了如何通过高级类型的方式,将普通类型的解决方案进行高级化。在课程最后,以Web 场景为例,介绍了 TypeScript 的工程应用。