TypeScript Decorators

随着 TypeScript 和 ES6 中 Classes 的引入，现在存在一些需要额外功能来支持注释或修改类和类成员的场景。 装饰器提供了一种为类声明和成员添加注释和元编程语法的方法。装饰器是 JavaScript 的第 2 阶段提案，可作为 TypeScript 的实验性功能使用。

要启用对装饰器的实验性支持，您必须在命令行或 tsconfig.json 中启用 ExperimentDecorators 编译器选项：

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

装饰器是一种特殊的声明，可以附加到类声明、方法、访问器、属性或参数。装饰器使用@expression 形式，其中表达式必须计算为一个函数，该函数将在运行时调用，并带有有关装饰声明的信息。

例如，给定装饰器@sealed，我们可以编写如下的sealed 函数：

function sealed(target) {
  // do something with 'target' ...
}

Decorator Factories

如果我们想自定义如何将装饰器应用于声明，我们可以编写一个装饰器工厂。装饰器工厂只是一个返回表达式的函数，该表达式将在运行时被装饰器调用。

我们可以用以下方式编写一个装饰工厂：

function color(value: string) {
  // this is the decorator factory, it sets up
  // the returned decorator function
  return function (target) {
    // this is the decorator
    // do something with 'target' and 'value'...
  };
}

当多个装饰器应用于单个声明时，它们的评估类似于数学中的函数组合。 在这个模型中，当组合函数 f 和 g 时，得到的复合 (f ∘ g)(x) 等价于 f(g(x))。

因此，在 TypeScript 中对单个声明评估多个装饰器时，将执行以下步骤：

• 每个装饰器的表达式都是从上到下计算的。
• 然后将结果作为函数从下到上调用。

一个例子：

function first() {
  console.log("first(): factory evaluated");
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("first(): called");
  };
}

function second() {
  console.log("second(): factory evaluated");
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("second(): called");
  };
}

class ExampleClass {
  @first()
  @second()
  method() {}
}

更多Jerry的原创文章，尽在："汪子熙":