Typescript 装饰器

Typescript 装饰器

装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上，以修改类的行为。在 Typescript 中，装饰器是一个实验性的特性，需要启用实验性装饰器特性才能使用。

Typescript 装饰器有以下几种类型：

类装饰器

类装饰器在类声明之前声明，用于修饰类的行为。类装饰器可以接收一个参数，该参数指定要修饰的类。

@decorator
class MyClass {
  // class implementation
}

以下是一个类装饰器的简单示例，它会在类的构造函数中添加一个新的成员变量：

function addPropToClass(constructor: Function) {
  constructor.prototype.newProp = 'new property';
}

@addPropToClass
class MyClass {
  // class implementation
}

const myClassInstance = new MyClass();
console.log(myClassInstance.newProp); // 输出 'new property'

方法装饰器

方法装饰器在方法声明之前声明，用于修饰方法的行为。方法装饰器可以接收三个参数：要修饰的类、要修饰的方法名称和方法描述符。

class MyClass {
  @decorator
  myMethod() {
    // method implementation
  }
}

以下是一个方法装饰器的简单示例，它会在方法执行时记录日志：

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

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

  return descriptor;
}

class MyClass {
  @logMethod
  myMethod() {
    // method implementation
  }
}

const myClassInstance = new MyClass();
myClassInstance.myMethod('arg1', 'arg2');

属性装饰器

属性装饰器在属性声明之前声明，用于修饰属性的行为。属性装饰器可以接收两个参数：要修饰的类和要修饰的属性名称。

class MyClass {
  @decorator
  myProperty: string;
}

以下是一个属性装饰器的简单示例，它会把属性的值转换成大写：

function uppercase(target: any, propertyKey: string) {
  let value = target[propertyKey];

  const getter = () => value;
  const setter = (newValue: string) => {
    value = newValue.toUpperCase();
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class MyClass {
  @uppercase
  myProperty: string = 'initial value';
}

const myClassInstance = new MyClass();
console.log(myClassInstance.myProperty); // 输出 'INITIAL VALUE'

参数装饰器

参数装饰器在参数声明之前声明，用于修饰方法或构造函数中的参数。参数装饰器可以接收三个参数：要修饰的类、要修饰的方法名称和参数索引。

class MyClass {
  myMethod(@decorator myParam: string) {
    // method implementation
  }
}

以下是一个参数装饰器的简单示例，它会在方法执行时记录日志：

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Method ${propertyKey} called with parameter ${parameterIndex}`);
}

class MyClass {
  myMethod(@logParameter myParam: string) {
    // method implementation
  }
}

const myClassInstance = new MyClass();
myClassInstance.myMethod('arg1');

以上是 Typescript 装饰器的基本介绍和应用场景。开发者可以根据自己的需求使用装饰器来增强类、方法、属性或参数的行为。