TypeScript 装饰器

装饰器是一种特殊的声明，可以应用于类、方法、访问器、属性或参数。 装饰器只是以 @expression 符号为前缀的函数，其中 expression 必须评估为在运行时调用的函数，并提供有关装饰声明的信息。

注意：装饰器是为 ES7 提出的实验性功能。 它已被包括 Angular 2 在内的一些 JavaScript 框架使用。 装饰器在未来的版本中可能会发生变化。

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

命令行

tsconfig.json

目的

TypeScript 装饰器用于以声明方式向现有代码添加注释和元数据。

装饰器工厂

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

装饰器工厂可以按以下方式编写

装饰器组合

我们可以将多个装饰器应用于声明。 以下示例有助于理解它。

在单行上

在多行上

装饰器的类型

TypeScript 使用以下类型的装饰器

1. 类装饰器
2. 方法装饰器
3. 访问器装饰器
4. 属性装饰器
5. 参数装饰器

1. 类装饰器

类装饰器在类声明之前定义，它描述了类的行为。 类装饰器应用于类的构造函数。 类装饰器可用于观察、修改或替换类定义。 如果类装饰器返回值，它将用给定的构造函数替换类声明。

示例

在上面的例子中，当执行 @sealed 装饰器时，它将密封构造函数及其原型，以便我们不能继承 Person 类。

2. 方法装饰器

方法装饰器在方法声明之前定义。 它应用于方法的属性描述符。 它可以用来观察、修改或替换方法定义。 我们不能在声明文件中使用方法装饰器。

方法装饰器函数的表达式接受三个参数。 它们是

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员名称。
3. 成员的属性描述符。

示例

在下面的例子中，@log 装饰器将记录新的项目条目。

3. 访问器装饰器

访问器装饰器在访问器声明之前定义。 它应用于访问器的属性描述符。 它可以用于观察、修改或替换访问器的定义。

注意：访问器是类声明的 getter 和 setter 属性。

访问器装饰器函数的表达式接受三个参数。 它们是

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员名称。
3. 成员的属性描述符。

示例

在下面的例子中，访问器装饰器 (@configurable) 被应用于 Employee 类的成员。

4. 属性装饰器

属性装饰器在属性声明之前定义。 它类似于方法装饰器。 属性装饰器和方法装饰器之间的唯一区别是它们不接受属性描述符作为参数，也不返回任何内容。

属性装饰器函数的表达式接受两个参数。 它们是

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员名称。

示例

在下面的例子中，@ReadOnly 装饰器将使 name 属性变为只读，因此我们不能更改它的值。

5. 参数装饰器

参数装饰器在参数声明之前定义。 它应用于类构造函数或方法声明的函数。 它不能在声明文件或任何其他环境上下文中使用（例如在声明的类中）。

参数装饰器函数的表达式接受三个参数。 它们是

1. 静态成员的类的构造函数或实例成员的类的原型。
2. 成员名称。
3. 函数参数列表中的参数索引。

示例

在下面的例子中，参数装饰器 (@required) 被应用于 Person 类的成员的参数。