typescript-装饰器

装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用。

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

装饰器的写法：

• 普通装饰器（无传参）
• 装饰器工厂（可传参）

装饰之后会立即调用的，自执行。

类装饰器

普通装饰器

@logClass
class Student {}

function logClass(p: any) {
  // p 就是装饰的 Student 类
  console.log(p);
}

装饰器工厂

@logClass({ age: 10 })
class Student {}

function logClass(params: any) {
  // 接收最外层参数
  console.log(params, "params"); // { age: 10 } params

  return function (target: any) {
    // 接收装饰的类
    console.log(target, "target");
  };
}

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。

class Student {
  @logClass("age")
  age: number = 10;
  @logClass("big")
  static big: string = "ts";
}

function logClass(p: any) {
  return function (target: any, attr: any) {
    console.log(p, target, attr);
  };
}

方法装饰器

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2. 成员的名字。
3. 成员的属性描述符。可以 value 取到原函数，切片

class Student {
  @logClass("add")
  add(x: number, y: number): number {
    return x + y;
  }
}

function logClass(p: any) {
  return function (target: any, methodName: string, desc: any) {
    console.log(p, target, methodName, desc);
  };
}