5分钟理解ts装饰器

类装饰器：
本质上是对类的构造进行包装（修改）。可以为同一个类定义多个装饰器，通过@decorator_name的形式写在类声明之前。
参数：类的构造函数作为其唯一的参数。

1. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
2. 参数装饰器应用到构造函数。
3. 类装饰器应用到类。

// 1.1 类装饰
// 类的构造函数作为其唯一的参数。
console.log('----class decorae----');
function classDecorate(constructor: Function) {
  console.log(arguments);
}

@classDecorate
class Hello {
  msg: string;
  constructor(message: string) {
    this.msg = message;
    console.log("Hello constructor:", message);
  }
  sayHello() {
      return "Hello, " + this.msg;
  }
}

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
1、target：对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、propertyKey：成员的名字。
3、descriptor：成员的属性描述符。

注意  如果代码输出目标版本小于ES5，属性描述符将会是undefined。

如果方法装饰器返回一个值，它会被用作方法的属性描述符。

注意  如果代码输出目标版本小于ES5返回值会被忽略。

console.log('----function decorate----');

function functionDecoreate(type: string) {
  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    console.log("type:----",type);
    console.log("target----",target);
    console.log("propertyKey----",propertyKey);
    console.log("descriptor----",descriptor);
  };
}
  
class Hello2 {
  msg: string;
  constructor(message: string) {
      this.msg = message;
  }

  @functionDecoreate(false, "MyStr")
  sayHello() {
      return "Hello, " + this.msg;
  }
}

var hello = new Hello2("hello");
console.log(hello.sayHello());

装饰 静态成员/实例成员 时的区别逻辑
在TypeScript类中：

实例成员是仅当类被实例化的时候才会被初始化的类成员；
静态成员是存在于类本身上（而非类的实例上）的类成员，静态成员需要用static关键字声明。