Skip to main content

3.装饰器

装饰器的作用​

装饰器是一种特殊的声明，它可以被附加到类声明、方法声明、访问符声明、属性声明、参数声明上。

装饰器本质上是一种特殊的声明，它会被编译成对类的修改。

装饰器的作用就是在编译阶段，为类、方法、属性、参数等添加一些特殊的行为。

类装饰器​

类装饰器会在编译阶段被调用，并且接收三个参数：

  • target: 装饰的类
interface Test {
  name: string;
  getName(): void;
}

const decClass: ClassDecorator = (target: any) => {
  console.log('this is a decClass', target);
  // 通过property可以自定义属性和方法
  target.prototype.name = 'sss'
  target.prototype.getName = () => {
    console.log('this is a decMethod')
  }
};

@decClass
Class Test implements Test {

}

属性装饰器​

属性装饰器会在编译阶段被调用，并且接收四个参数：

  • target: 装饰的类
  • propertyKey: 装饰的属性名
const propertyDecorator: PropertyDecorator = (target, key) => {
  console.log(target, key);
};

class Test {
  @propertyDecorator
  public test: string = "test";

  @propertyDecorator
  public test2: string = "test2";
}

方法装饰器​

方法装饰器会在编译阶段被调用，并且接收四个参数：

  • target: 装饰的类
  • propertyKey: 装饰的方法名
  • descriptor: 装饰的方法的描述符
const methodDecorator: MethodDecorator = (target, key, descriptor) => {
  console.log(target, key, descriptor);
};

class Test {
  @methodDecorator
  public getName(): string {
    return "name";
  }

  @methodDecorator
  public getAge(): number {
    return 18;
  }
}

参数装饰器​

参数装饰器会在编译阶段被调用，并且接收五个参数：

  • target: 装饰的类
  • propertyKey: 装饰的方法名
  • parameterIndex: 装饰的参数索引
const parameterDecorator: ParameterDecorator = (target, key, descriptor) => {
  console.log(target, key, descriptor);
};

class Test {
  public getName(
    @parameterDecorator countryId: number,
    @parameterDecorator id: string
  ): string {
    return "name";
  }
}