深入浅出：TS 装饰器，让你的代码更优雅

TS 装饰器：让你的代码更优雅

装饰器，顾名思义，就是一种可以装饰其他代码元素的语法糖。在 TypeScript 中，装饰器本质上是一种函数，可以通过在类、方法或属性前加上 @ 符号来使用。当装饰器被应用时，它将在编译阶段运行，并对被装饰的目标进行修改。

TS 装饰器是一个功能强大的工具，它可以显著提升代码的可读性、可维护性和可扩展性。例如，你可以使用装饰器来：

• 跟踪方法的执行时间
• 验证方法的参数
• 自动生成代码
• 注入依赖项

这些只是 TS 装饰器众多应用场景中的几个例子。

要创建自己的装饰器，你只需要创建一个带有 @ 符号的函数。例如，以下装饰器会在类原型上添加一个名为 "log" 的方法：

function log(target: any) {
  target.prototype.log = function() {
    console.log(`The class ${target.name} has been instantiated.`);
  };
}

现在，你可以通过在类前加上 @log 装饰器来使用它：

@log
class MyClass {
  // ...
}

当 MyClass 类被实例化时，log() 方法将自动添加到其原型中。

装饰器不仅限于类，你还可以将其用于方法和属性。例如，以下装饰器会在方法被调用时打印一条消息：

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`The method ${propertyKey} has been called with the following arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

你可以通过在方法前加上 @logMethod 装饰器来使用它：

class MyClass {
  @logMethod
  myMethod() {
    // ...
  }
}

当 MyClass.myMethod() 被调用时，log() 方法将被触发，并打印一条消息。

TS 装饰器是一个强大的工具，它可以帮助你扩展和修改类和方法的行为。通过理解其工作原理和常见应用场景，你可以充分利用装饰器来提高代码的质量。