剥开装饰器的层层迷雾，揭示TS装饰器的本质

2024-01-31 05:26:40

装饰器：在 TypeScript 中增强代码的神奇工具

认识装饰器的“亲戚”：元编程

在踏入装饰器的世界之前，让我们先了解它的“亲戚”：元编程。元编程指的是在程序运行时对程序本身进行修改的能力。通过元编程，我们可以实现许多强大的功能，例如热加载和代码生成。而装饰器正是元编程在 TypeScript 中的具体应用。

装饰器揭秘：一个修饰类的函数

本质上，装饰器就是一个函数，它接受一个类或类方法作为参数，并返回一个新的类或类方法。装饰器函数可以对类或类方法进行修改，实现各种各样的功能。例如，我们可以使用装饰器来添加日志记录功能。

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with args ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Called ${propertyKey} and got result ${JSON.stringify(result)}`);

    return result;
  };
}

class MyClass {
  @log
  public sayHello(name: string) {
    console.log(`Hello, ${name}!`);
  }
}

const myClass = new MyClass();
myClass.sayHello('John');

在上面的代码中，log 装饰器函数接受一个类（MyClass）和一个类方法（sayHello）作为参数，并返回一个新的类方法。这个新方法在原有方法的基础上添加了日志记录功能。

装饰器应用：灵活多变

装饰器可以应用于类、类方法、属性和参数等不同的元素。不同的应用场景有不同的用法。例如，当我们希望在类实例化时执行某些操作时，可以使用类装饰器。

function logClass(target: Function) {
  console.log(`Creating instance of ${target.name}`);
}

@logClass
class MyClass {
  constructor() {
    console.log('Constructor called');
  }
}

const myClass = new MyClass();