TypeScript中的装饰器

在TypeScript中，装饰器是一种特殊的语法，用于对类、属性、方法或参数进行注解和修改。它们提供了一种简洁而强大的方式来扩展或修改现有代码的功能，同时保持代码的可读性和可维护性。

什么是装饰器？

装饰器是一种特殊的声明，通过使用@符号紧跟在声明之前，将其应用于类、属性、方法或参数。它们可以被视为函数，接受目标对象和属性作为参数，并返回修改后的目标对象和属性。

如何使用装饰器？

首先，我们需要在TypeScript编译器中启用装饰器特性。可以在tsconfig.json文件中的compilerOptions中添加"experimentalDecorators": true选项来启用装饰器。

在类上使用装饰器时，装饰器将应用于整个类：

@decorator
class Example {
   // class content
}

在属性上使用装饰器时，装饰器将应用于属性本身：

class Example {
  @decorator
  property: string;
}

在方法上使用装饰器时，装饰器将应用于方法本身：

class Example {
  @decorator
  method() {
    // method content
  }
}

在参数上使用装饰器时，装饰器将应用于参数本身：

class Example {
  method(@decorator parameter: string) {
    // method content
  }
}

类装饰器

类装饰器是最常见的装饰器类型之一，它用于注解和扩展类的行为。类装饰器可以接收一个参数，该参数是目标类的构造函数。

一个常见的示例是日志记录装饰器，它可以在类每次方法调用时打印日志：

function logClass(target: Function) {
  console.log('Class decorated:', target);
}

@logClass
class Example {
  method() {
    console.log('Method called');
  }
}

const example = new Example();
example.method();

输出结果将会是：

Class decorated: [Function: Example]
Method called

属性装饰器

属性装饰器是用来注解和修改类属性的行为的。属性装饰器可以接收两个参数，分别是目标类的原型对象和属性名称。

一个常见的示例是验证装饰器，它可以验证属性的值是否符合特定的规则：

function validateProperty(target: Object, propertyKey: string) {
  let value = target[propertyKey];
  
  const getter = function() {
    return value;
  };
  
  const setter = function(newValue) {
    // perform validation
    if (typeof newValue === 'number' && newValue > 0) {
      value = newValue;
    } else {
      throw new Error('Invalid value');
    }
  };
  
  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class Example {
  @validateProperty
  numberProperty: number;
}

const example = new Example();
example.numberProperty = 10;
console.log(example.numberProperty);

输出结果将会是：

10

在这个示例中，validateProperty装饰器用于验证numberProperty属性的值是否为正整数。如果属性的值符合规则，就允许设置属性值；否则，将抛出一个错误。

方法装饰器

方法装饰器用于注解和修改类方法的行为。方法装饰器可以接收三个参数，分别是目标类的原型对象、方法名称和方法属性描述符。

一个常见的示例是性能计时装饰器，它可以在方法调用前后记录方法的执行时间：

function logPerformance(target: Object, methodName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    const start = performance.now();
    const result = originalMethod.apply(this, args);
    const end = performance.now();
    
    console.log(`Method ${methodName} took ${end - start} ms to execute`);
    
    return result;
  };
  
  return descriptor;
}

class Example {
  @logPerformance
  method() {
    // method content
  }
}

const example = new Example();
example.method();

输出结果将会是：

Method method took 10 ms to execute

在这个示例中，logPerformance装饰器用于计算method方法的执行时间。它会在方法调用前后记录时间，并输出执行时间。

参数装饰器

参数装饰器用于注解和修改方法参数的行为。参数装饰器可以接收三个参数，分别是目标类的原型对象、方法名称和参数索引。

一个常见的示例是日志记录装饰器，它可以记录方法参数的值：

function logParameter(target: Object, methodName: string, parameterIndex: number) {
  console.log(`Method ${methodName} - Parameter ${parameterIndex}:`, target, methodName, parameterIndex);
}

class Example {
  method(@logParameter parameter: string) {
    // method content
  }
}

const example = new Example();
example.method('Hello');

输出结果将会是：

Method method - Parameter 0: [class Example], method, 0

在这个示例中，logParameter装饰器用于记录method方法的第一个参数。它会在方法调用时输出参数的值和索引。

总结

装饰器是一种强大的工具，使我们能够以声明式的方式扩展和修改现有的代码。它们提供了一种简单而灵活的方式来实现代码注解，并可以在不改变原有逻辑的情况下修改代码的行为。

通过使用类装饰器、属性装饰器、方法装饰器和参数装饰器，我们可以实现各种功能，例如日志记录、性能计时、验证等。

尽管装饰器在TypeScript中是一项实验性功能，但它已经被广泛使用，并且在许多现代框架和库中得到了应用。它们是一种提高代码可重用性和可扩展性的重要工具，因此值得我们掌握和深入理解。