TypeScript Decorators

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

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

tsc --target ES5 --experimentalDecorators

tsconfig.json:

装饰器是一种特殊的声明，可以附加到类声明、方法、访问器、属性或参数。装饰器使用@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 中对单个声明评估多个装饰器时，将执行以下步骤：

每个装饰器的表达式都是从上到下计算的。

然后将结果作为函数从下到上调用。

一个例子：