TypeScript 中的装饰器

在angular中有着许多装饰器函数，例如装饰模块的@NgModule()，表示组件的@Component()，给一个变量前面加@Input()即表示当前这个变量是可输入的，在父组件中可以用属性绑定的方式向子组件传递数据，@Output()表示后面的变量是EventEmiter实例，用于事件发布，还有@Skip等等...

装饰器函数，即「装饰模式」—— 我们可以在「不侵入原有代码」的情况下，为代码增加一些「额外的功能」。
所谓「额外的功能」一般都比较独立，不和原有逻辑耦合，只是做一层包装。你也可以把它看成「包装模式」。

有一些场景特别适用这个模式，比如：

• 记录方法的开始执行和结束执行。
• 为运算过程提供额外的缓存能力。
• 标记方法为 deprecated。

使用 decorators

TypeScript是ES6的超集，提供了相关语法糖

// 定义 decorator
function performanceTiming(...args) {

  // 返回包装后的方法
  return function(target, key, descriptor) {
    // ...
  };
}

class MyClass {
  
  // 使用这种语法修饰方法 func
  @performanceTiming
  func() {}
}

在我看来，这种语法糖对 decorators 的「定义」和「调用」都做了收敛，带来了「形式美感」。说人话，可读性更好。

• 在 decorators 定义时，约束了装饰器的输入（固定的几个相关参数）和输出（返回一个 function），使所有装饰器风格得到收敛。
• 在 decorators 调用时，以无侵入的语法「修饰」类或方法，可维护性和可读性都提升很多。
  这两个优势，让我想到 ES decorators 的一个重要使用场景，便是应用于构架一致性 API。

decorators 对构架一致性 API有着深远的意义，特别是对于多人开发的大型类库。能使各模块提供一致的标准公用功能，公用功能的实现和调用方式也保持一致，整体 API 的风格一致。