探索TypeScript：装饰器

{  
    "compilerOptions": {  
        "target": "ES5",  
        "experimentalDecorators": true  
    }  
}

// 类装饰器，接受一个参数即为类本身
// 将装饰后的类以及类的原型全部冻结变为不可扩展以及不可修改
function freeze(constructor: Function) {
  Object.freeze(constructor); // 冻结装饰的类
  Object.freeze(constructor.prototype); // 冻结类的原型
}


// 调用 freeze 装饰装饰 BugReport
@freeze
class BugReport {
  static type = 'report'
}


BugReport.type = 'hello'
console.log(BugReport.type) // TypeError: Cannot assign to read only property 'type' of function 'class BugReport

function override(target: new () => any) {
  return class Child {

  }
}

@override // override 装饰器修改了 Parent class 返回的实例对象
class Parent {

}

const instance = new Parent()

console.log(instance) // Child {}

function enumerable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {

    console.log(target) // Greeter.prototype
    console.log(propertyKey) // greet

    // 将该方法(Greeter.prototype.greet) 变为不可枚举
    descriptor.enumerable = value;
  };
}


class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
 
  // @enumerable(false) 修饰实例方法，既修饰器第一个参数为 Greeter.prototype
  @enumerable(false)
  greet() {
    return "Hello, " + this.greeting;
  }
}

console.log(Object.keys(Greeter.prototype)) // []

function baseLog(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // 触发属性访问器时
  console.log(`Trigger getter(${target.name}/${propertyKey})`)
}

class Person {

  @baseLog
  static get username() {
    return '19Qingfeng'
  }
}

// Trigger getter(Person/username)
// 19Qingfeng
console.log(Person.username)

class Person {

  constructor(@logger name: string) {

  }
}


function logger(target: any, methodName: string | undefined, index: number) {
  console.log(target) // [Function: Person]
  console.log(methodName) // undefined
  console.log(index) // 0
}

// ....
// 属性装饰器
__decorate([propertyDecorators], Parent.prototype, 'company', undefined);
// 访问器属性装饰器（原型）
__decorate([accessorDecorator], Parent.prototype, 'gender', null);
// 方法装饰器 & 参数（实例方法）装饰器
__decorate(
  [methodDecorator, __param(0, paramDecorator)],
  Parent.prototype,
  'getName',
  null
);
// 访问器属性装饰器（实例）
__decorate([accessorDecorator], Parent, 'staticGender', null);
// 方法装饰器（实例）
__decorate([methodDecorator], Parent, 'getStaticName', null);
// 类装饰器 & 参数装饰器（类的构造函数）
Parent = __decorate([logger, __param(0, paramDecorator)], Parent);
return Parent;

var __decorate = function (decorators, target, key, desc) {
 // 首先获得实参的个数
 var c = arguments.length,

 // 1. 如果实参个数小于 3 ，则表示该装饰器为 类装饰或者在构造函数上的参数装饰器
 // 2. 如果实参个数大于等于3， 则表示为非 1 情况的装饰器。
 // 2.1 此时根据传入的第四个参数，来判断是否存在属性描述
 // 如果 desc 传入 null，则获取当前 target key 的属性描述符给 r 赋值。比如访问器属性装饰器、方法装饰器
 // 相反如果传入非 null （通常为 undefined）， 则直接返回 desc 。比如属性装饰器


 // 此时 r 根据不同情况，
 // 要么是传入的 target    （实参个数小于3）
 // 要么是 Object.getOwnPropertyDescriptor(target, key) （实参个数小于3，且 desc 为 null）
 // 要么是 undefined （实参个数小于3， desc 为 undefined）
   r =
     c < 3
       ? target
       : desc === null
       ? (desc = Object.getOwnPropertyDescriptor(target, key))
       : desc,
   d;
 for (var i = decorators.length - 1; i >= 0; i--) {
   // 从数组的末尾到首部依次遍历获得每一个装饰方法
   if ((d = decorators[i])) {
     // 同样判断参数个数
     // 1. 如果实参个数小于 3， 类装饰器/构造函数上的参数装饰
     // 此时 d 为当前装饰器方法， r 为传入的 target (Parent)
     // 此时直接使用当前装饰器进行调用，传入 d(r) 也就是 d(Parent)
     // 2. 如果实参个数大于 3 ，则调用当前装饰 d(target, key, r)
     // 3. 如果实参个数等于 3 , 则调用 d(target, key)
     // 同时为 r 重新赋值，交给下一次 for 循环遍历处理下一个装饰器函数
     r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   }
 }
 // 最终装饰器函数会进行返回
 // 如果个数大于 3，并且 r 存在 则会返回 Object.defineProperty(target, key, r) ，将返回的 r 当作属性描述符定义在 target key 上
 // 最终返回 r 
 return c > 3 && r && Object.defineProperty(target, key, r), r;
};

Parent = __decorate([logger, __param(0, paramDecorator)], Parent);