
上QQ阅读APP看书,第一时间看更新
1.3.4 使用对象展开赋值属性
在1.3.2节的ConsolidatedGrid示例中,我们分别把每个属性赋值给交叉。根据我们想要实现的效果,还有另外一种用更少的代码创建<Grid & Margin>交叉类型的方法。通过使用展开运算符,可以对一个或多个输入类型的属性自动执行浅拷贝。
我们首先来看看如何重写前面的示例,使其自动填充边距信息:


当实例化consolidatedGrid函数时,这段代码将复制并填入margin的属性。三个点(...)告诉编译器将该操作作为一个展开操作进行处理。由于已经填充了Width和Height,所以可以使用+=来加上grid的元素。
如果我们想同时使用grid和margin中的值,会发生什么?要实现这种功能,可以将实例化代码修改为如下代码:

这将使用grid的值填入Grid中的值,然后使用margin的值填入Margin中的值。这说明两点,首先,展开操作将属性映射到合适的属性,其次,展开操作的顺序很重要。因为margin和grid有相同的属性,所以grid设置的值会被margin设置的值覆盖。为了使Width和Height属性的值来自grid,必须颠倒这行代码的顺序。得到的代码如下所示:

现在,我们应该看看TypeScript从这段代码生成的JavaScript代码。当使用ES5进行编译时,得到的JavaScript代码如下所示:

但是,如果使用ES2015或更新版本编译代码,将不再有_assign函数,ConsolidatedGrid的JavaScript代码将如下所示:


可以看到,TypeScript努力确保对于任何ECMAScript版本,生成的代码都能够工作。我们不必担心某个功能是否可用,可以交给TypeScript来替我们完成必要的处理工作。