typeScript

ts装饰器

联系站长 作者:web知道 来源:未知 2019-12-26 16:36 我要评论

ts装饰器...

装饰器用于增强类或实例等等的功能

可传参的类装饰器
function myFunc(level:any):any{
        let arr = ['我','真','的','爱','你']
        //可传参装饰器中,必须返回函数
        // target代表当前调用的类
        return function(target:any):void{
                 target.like = `${level},${arr.join('')}`
                 //target.like 代表给当前调用类添加了一个静态属性为like
        }
}


//在需要调用装饰器的类的上方使用@加装饰器的名称即可
@myFunc('某某一')
class awfi{}
 
@myFunc('某某二')
class fnypm{}


 
可传参的方法装饰器
//config 装饰器传参
function log(config){
      //里面函数用来接收装饰器执行时js引擎传递进来的参数 
      //target 为方法所在的原型
      //name 为方法名称
      //如果装饰器需要传参才用return 一个函数,如果不传参,可以直接写下面这个即可
      return function(target:any,name:string):void{
            let old = target[name] //保存原函数,便于在原函数的基础上添加新的功能
            //下面重置函数
            target[name] = function():void{
                  if(config == 'top' || config == 'all'){
                        console.log('top')
                  }
                  if(config == 'all'){
                        old() //调用旧的函数功能,
                        //下面可以写入新的功能,如此就新功能和旧的方法功能合并,实现增强的效果
                        console.log('all')
                  }
            }
      }
}
 
class initClass{
      @log('top')
      fn1():void{
            console.log('我是fn1')
      }
 
      @log('all')
      fn2():void{
            console.log('我是fn2')
      }
}


// 属性装饰器
     function awfi(...arg:any[]):void{
          console.log(arg)
          arg[0][arg[1]]='要不要回家过年'
    }
 
class fnypm{
         //实例属性接收到的第一个参数为 原型,第二个参数为装饰的属性名称
         @awfi
          a:string = '回家过年咯'
 
          //静态属性接收到的第一个参数为 类,第二个参数为装饰的属性名称
          @awfi
          static b:string = '真的回家过年吗'
}
 




本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
精彩导读