- TypeScript项目开发实战
- (英)彼得·欧汉龙
- 846字
- 2025-02-18 09:10:04
1.3.5 使用REST属性解构对象
在使用展开运算符构建对象的地方,也可以使用REST属性解构对象。解构就是把一个复杂的东西拆分为较为简单的东西。换句话说,当把数组内的元素或者对象的属性赋值给单独的变量时,就是在解构它们。虽然一直以来,我们都能够把复杂的对象和数组分解为更简单的类型,但是通过使用REST参数,TypeScript提供了一种干净优雅的方式来分解类型,包括对象和数组。
要理解REST属性是什么,首先需要理解如何解构对象或者数组。我们将解构下面的对象字面量:

解构该对象的一种方法是使用下面的代码:

虽然这段代码能够解构对象,但是不够优雅,代码中也存在重复。好在对于这种简单的解构,TypeScript采纳了JavaScript中的更加简洁的语法:

从功能上讲,这行代码得到的变量与一开始的实现相同。各个属性必须与要解构的对象中的属性具有相同的名称,这样TypeScript才知道哪个变量对应于对象的哪个属性。如果由于某种原因,我们需要修改一个属性的名称,则可以使用下面的语法:

对对象使用REST运算符的思想是它可用于可变数量的变量。因此,下面的代码将把对象解构为manufacturer和一个REST变量,该变量中捆绑了对象中除了manufacturer之外的字段:

REST运算符必须出现在赋值列表的末尾;如果在REST运算符的后面添加任何属性,TypeScript编译器将会报错。
执行了这条语句后,details将包含type和strings值。由这条语句生成的JavaScript值得关注。前一个例子中解构对象的形式在JavaScript中也是相同的。JavaScript中没有与REST属性等效的结构(在ES2018之前的版本中肯定没有),所以TypeScript生成的JavaScript为我们提供了一种一致的方式来解构比较复杂的类型:

数组解构的方式与对象解构类似。其语法与对象解构几乎完全相同,区别在于数组解构使用[ ],而对象解构使用{ },并且在数组解构中,变量的顺序基于对应元素在数组中的位置。
在解构数组的原始方式中,变量必须与数组中特定索引位置的元素关联在一起:

可以将上面的语法简化如下:

TypeScript团队擅长为我们提供一致的、符合逻辑的体验,所以不必奇怪,我们能够使用相似的语法对数组应用REST属性:

同样,并不存在直接对应的JavaScript结构,但编译后的TypeScript显示,JavaScript确实提供了底层基础,使TypeScript的设计者们能够通过array.slice优雅地加以利用:
