如何使用 TypeScript 创建和使用装饰器？

八股文_TypeScript面试题 0 38

参考回答

装饰器（Decorator） 是 TypeScript 中的一种特殊类型的声明，它能够在类声明、方法、属性、参数等上添加额外的功能或修改其行为。装饰器是基于元编程的技术，它们允许在运行时修改类及其成员的定义。

在 TypeScript 中，装饰器是通过 @ 符号定义和应用的，通常用于类、方法、属性、访问器或参数上。要使用装饰器，首先需要在 tsconfig.json 文件中启用 experimentalDecorators 配置项。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

创建和使用装饰器

类装饰器
类装饰器是应用于类构造函数的函数。它接收一个类构造函数作为参数，并返回一个新的类构造函数（或者修改原类）。
```
function LogClass(target: Function) {
 console.log(`Class ${target.name} has been created.`);
}

@LogClass
class Person {
 constructor(public name: string) {}
}

const person = new Person("Alice");
```
在这个例子中，@LogClass 装饰器会在类 Person 被创建时输出信息。装饰器的目标是类构造函数，因此你可以在装饰器中修改类或执行其他操作。

方法装饰器

方法装饰器应用于类的方法。它接收三个参数：

target: 类的原型（对于实例方法）或类构造函数（对于静态方法）。
propertyKey: 方法名。
descriptor: 属性描述符，可以用来修改方法的行为。

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalMethod = descriptor.value;
 descriptor.value = function (...args: any[]) {
   console.log(`Method  ${propertyKey} was called with arguments:$ {args}`);
   return originalMethod.apply(this, args);
 };
}

class Person {
 constructor(public name: string) {}

 @LogMethod
 greet(message: string) {
   console.log(` ${this.name}:$ {message}`);
 }
}

const person = new Person("Alice");
person.greet("Hello!");  // 输出：Method greet was called with arguments: [ 'Hello!' ]
                         //         Alice: Hello!

在这个例子中，@LogMethod 装饰器会包装 greet 方法，输出方法被调用时的参数。

属性装饰器

属性装饰器应用于类的属性上，接收两个参数：

target: 类的原型。
propertyKey: 属性名。

function LogProperty(target: any, propertyKey: string) {
 console.log(`Property  ${propertyKey} has been defined in class$ {target.constructor.name}`);
}

class Person {
 @LogProperty
 name: string;

 constructor(name: string) {
   this.name = name;
 }
}

const person = new Person("Alice");  // 输出：Property name has been defined in class Person

这里，@LogProperty 装饰器会在属性 name 被定义时输出信息。

参数装饰器

参数装饰器应用于方法的参数上，它接收三个参数：

target: 类的原型（对于实例方法）或类构造函数（对于静态方法）。
propertyKey: 方法名。
parameterIndex: 参数索引。

function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
 console.log(`Parameter at index  ${parameterIndex} in method$ {propertyKey} has been decorated.`);
}

class Person {
 constructor(public name: string) {}

 greet(@LogParameter message: string) {
   console.log(` ${this.name}:$ {message}`);
 }
}

const person = new Person("Alice");
person.greet("Hello!");  // 输出：Parameter at index 0 in method greet has been decorated.

在这个例子中，@LogParameter 装饰器会在方法的参数被定义时输出信息。

详细讲解与拓展

1. 装饰器的作用

装饰器为 TypeScript 提供了一个非常强大的功能，它允许你在运行时通过元编程的方式来修改类、方法、属性和参数。常见的用途包括：
– 日志记录：用于记录方法的调用信息或类的实例化过程。
– 性能监控：可以用来衡量函数的执行时间。
– 验证：用于对方法的输入参数进行验证。
– 依赖注入：可以在类或方法中注入依赖的对象。

2. 装饰器的执行时机

装饰器的执行时机是在类或成员被定义时，而不是在实例化或调用时。对于类装饰器，它在类被加载时执行；对于方法、属性和参数装饰器，它们在类成员定义时执行。

3. 装饰器的顺序

多个装饰器作用于同一个元素时，装饰器的执行顺序是从下到上的。即，离目标最近的装饰器首先执行，然后依次向上执行。

function Decorator1(target: any) {
  console.log("Decorator1 executed");
}

function Decorator2(target: any) {
  console.log("Decorator2 executed");
}

@Decorator1
@Decorator2
class MyClass {}

输出：

Decorator2 executed
Decorator1 executed

4. 反射和元编程

通过使用装饰器，TypeScript 可以实现一些元编程的功能，结合反射技术（例如使用 reflect-metadata 库），可以在运行时获取装饰器应用到类、方法、属性等上的元数据。

5. 装饰器与类实例

装饰器不会直接修改类实例，它们修改的是类的构造函数或成员。因此，装饰器对实例化过程并不会产生直接影响，但你可以通过装饰器修改构造函数或方法的行为，间接改变实例的表现。

总结

TypeScript 的装饰器为我们提供了一种通过元编程机制增强类及其成员的方式。通过 @ 符号定义装饰器，并将其应用于类、方法、属性和参数等。装饰器可以用来实现诸如日志记录、性能监控、验证等功能。为了使用装饰器，需要在 tsconfig.json 中启用 experimentalDecorators 选项。