Typescript--装饰器

装饰器定义

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或者参数上，可以修改类的行为。通俗讲，装饰器就是一个方法，可以注入到类，方法，属性参数上来扩展类，属性，方法，参数的功能。
常见的装饰器有：类装饰器，属性装饰器，方法装饰器，参数装饰器。
装饰器的写法：普通装饰器（无法传参），装饰器工厂（可传参）
装饰器是过去几年中js的最大成就之一，已是es7的标准特性之一

类装饰器

• 类装饰器：类装饰器在类声明之前就被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或者替换类定义，传入一个参数。

• 普通装饰器（不带参数）

//  装饰器是一个普通函数，其参数就是类，可以在装饰器中对类的属性和方法等进行扩展
function logClass (param: any) {
    console.log(param)
    param.prototype.run = function () {
        console.log('世界那么大，我想去看看')
    }
}

@logClass
class Log {
    contructor () {

    }
}

let log = new Log()
log.run()   //  世界那么大，我想去看看

• 类装饰器（装饰工厂）—-可传参

  function logClass(param: string) {
      return function (target: any) {
          //  target是当前的类
          //  param是装饰器接受的参数
          console.log(param)  //  世界那么大
      }
  }
  @logClass('世界那么大')
  class Log {
      contructor () {}
  }
  var log = new Log()

  装饰器可以重栽构造函数：类装饰器表达式会在运行时当作函数被调用，类的构造函数作为唯一的参数。如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

  function logClass (target: any) {
      //  重载构造函数
      return class extends target {
  
      }
  }
  @logClass
  class HttpClient {
      public apiUrl: string | undefined;
      constructor () {
  
      }
  }

  属性装饰器

  属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：
• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象；
• 成员的名字

function logClass (target: any) {
    //  重载构造函数
    return class extends target {

    }
}
function logProperty (params: string) {
    return function (target:any, attr: any) {
        target[arr] = param
        //  target是类的原型对象
        //  param是装饰器的参数
    }
}
@logClass
class HttpClient {
    @logProperty('xxxxxx')
    public apiUrl: string | undefined;
    constructor () {

    }
}

方法装饰器

他会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法的定义。
方法装饰器会在运行时，传入三个参数：

• 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象
• 成员的名字
• 成员属性的描述符

  function get(params: any) {
      return function (target:any,methodName， desc:any) {
          var oMethod = desc.value
          desc.value = function (...agrs:any[]) {
              args = args.map(value => {
                  return String(value)
              })
              oMethod.apply(this, args)
          }
      }
  }
  class HttpClient {
      public url: string | undefined;
      constructor () {
  
      }
      @get("http://www.baidu.com")
      getData(...args:any[]) {
          console.log(args)
      }
  }
  var http = new HttpClient()
  http.getData(1222, '1122')

  方法参数装饰器

  参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入三个参数：
• 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象
• 参数的名字
• 参数在函数参数列表中的索引

  function logParams (params: any) {
      return function(target:any,paramsName:any) {
          target.url = params
      }
  }
  class HttpClient {
      public url: any | undefined
      constructor () {}
      getData(@logParams('uuid') uuid:any ) {
          console.log('ddddd')
      }
  }
  var http = new HttpClient()
  http.getData(1212132)

装饰器的执行顺序

属性装饰器 > 方法装饰器 > 方法参数装饰器 > 类装饰器
如果有多个同样的装饰器，那么会从下向上之行