typescript装饰器

ts装饰器

装饰器是一种特殊类型的声明，他能被附加到类声明，方法，属性或参数上，可以修改类的行为
简单的将装饰器就是一个方法，可以注入到类、方法、属性参数上扩展类、属性、方法、参数的功能
装饰器使用：在类上写@装饰器名称

• 常见的装饰器有
  • 类装饰器
  • 属性装饰器
  • 方法装饰器
  • 参数装饰器
• 装饰器的写法
  • 普通装饰器(无法传参)
  • 装饰器工厂(可以传参)

类装饰器

• 普通装饰器(无法传参)

  //类装饰器:普通装饰器(不可以传参)
  //定义装饰器
  namespace A{ //命名空间
      function word (a:any){
          console.log(a)
          //a就是当前类
          //动扩展属性
          a.prototype.apiUrl = '动态扩展属性'
      }
      @word
      export class Hello {
          constructor(){
      
          }
          eat(){
      
          }
      }
  }
  var h:any = new A.Hello()
  console.log(h.apiUrl)
  

• 装饰器工厂(可以传参)

  //类装饰器:装饰器工厂(可以传参)
  namespace B{
      function word (a:string){
          return function(target:any){
              console.log(target)
              console.log(a)
              target.prototype.apiUrl = a
          }
      }
      @word('hello')//把hello赋值给a，把类赋值给taeget
      export class Hello {
          constructor(){
          }
          eat(){
      
          }
      }
  }
  var http:any = new B.Hello()
  console.log(http.apiUrl)//hello
  

• 用装饰器修改类和方法中的数据

  //定义装饰器
  function logClass(target:any){
      console.log(target)
      return class extends target{
          apiUrl:any = '修改后的数据';//修改类中的数据
          getData(){
              //修改方法中的数据
              this.apiUrl = this.apiUrl+'1231231'
              console.log(this.apiUrl)
          }
      }
  }
  @logClass
  class httpCl {
      public apiUrl:string | undefined
      constructor(){
          this.apiUrl = '这是构造函数里的apiUrl'
      }
      getData(){
          console.log(this.apiUrl);
      }
  }
  var https = new httpCl()
  https.getData()
  
  

属性装饰器(接受两个参数)

修改类里面的属性

namespace C{
    //类装饰器
    function logClass(params:string){
        return function(target:any){
            // console.log(target)
            // console.log(params)
            target.prototype.apiUrl = params;
        }
    }
    // 属性装饰器//(接受两个参数)
    function logProperty(params:any){
			//(接受两个参数)
        return function (target:any,attr:any){
            console.log(target)
            console.log(attr)
            target[attr] = params //就可以修改下面属性的url
        }
    }
    @logClass('lalala')
    export class HttpClient{
        @logProperty('hahaha')
        public url:any | undefined;
        constructor(){

        }
        getData(){
            console.log(this.url)
        }
    }
}
var http:any = new C.HttpClient();

http.getData() //hahaha

方法装饰器

• 方法装饰器(接收三个参数)，添加方法和属性
  1. 对静态成员来说，是类的构造函，对实例成员,是类的原型对象。（静态成员：类的构造函数。实例成员:类的原型对象）
  2. 成员名字（方法名称）
  3. 成员的属性描述

  •   namespace D {
          function logMethod(params: any) {
              return function (target: any, methodName: any, desc: any) {
                  console.log(target)
                  console.log(methodName)
                  console.log(desc)
                  target.apiUrl = 'xxxx' //扩展属性
                  //扩展方法
                  target.run = function () {
                      console.log('run')
                  }
              }
          }
          export class HttpClient {
              public url: any | undefined
              constructor() {
      
              }
              @logMethod('1111')
              getData() {
      
              }
          }
      }
      var hs: any = new D.HttpClient()
      console.log(hs.apiUrl) //xxxx
      hs.run()//run
    

• 方法装饰器，修改类中的方法

  •   namespace E{
          function alterMethod (params:any){
              return function(target:any,methodName:any,desc:any){
                  console.log(target)
                  console.log(methodName)
                  console.log(desc.value)
                  var oMethos = desc.value
                  desc.value = function (...arr:any[]){
                      console.log(arr)
                      oMethos.apply(this,arr)
                  }
              }
          }
          export class HttpClient {
              public url: any | undefined
              constructor(){
      
              }
              @alterMethod('000000')
              getData(...arr:any){
                  console.log(arr)
                  console.log('this.url')
              }
          }
      }
      var http1:any = new E.HttpClient()
      http1.getData(123,'sdad')
      //打印
      // (2) [123, "sdad"]
      // (2) [123, "sdad"]
      // this.url
      
    

• 参数装饰器
  • 参数装饰器表达式会在运行是当作函数调用，可以使用参数表达式为类的原型增加一些数据，传入下列三个参数：
    1. 对静态成员来说，是类的构造函，对实例成员,是类的原型对象。（静态成员：类的构造函数。实例成员:类的原型对象）
    2. 参数名字
    3. 参数在函数参数列表中的索引

   // // 参数装饰器
  // 参数装饰器表达式会在运行是当作函数调用，可以使用参数表达式为类的原型增加一些数据，传入下列三个参数：
  // 		1. 对静态成员来说，是类的构造函，对实例成员,是类的原型对象。（静态成员：类的构造函数。实例成员:类的原型对象）
  // 		2. 参数名字
  // 		3. 参数在函数参数列表中的索引
  namespace F{
      function methods(parameter:any){
          return function (target:any,methodName:any,paramsIndex:any) {
              console.log(parameter) //xxxx
              console.log(target) //类
              console.log(methodName)//getData
              console.log(paramsIndex)//0
              target.as=parameter
          }
      }
      export class HttpClient{
          public url:any | undefined
          constructor(){
  
          }
          getData(@methods('xxxx') uuid:any){
              console.log(uuid)//12323
          }
      }
  }
  var httpss:any = new F.HttpClient()
  httpss.getData(12323)
  console.log(httpss.as)//xxxx