TypeScript中的装饰器、类装饰器、属性装饰器、方法装饰器、方法参数装饰器

装饰器

装饰器是一种特殊类型的声明，它能够被附加到类的声明、方法、属性、参数上，可以改变类的行为。通俗来讲装饰器就是一个方法，可以注入到类、方法、属性、参数上，来扩展类方法属性参数的功能（过去几年js最大的成就之一，es7的标准）。

常见的装饰器有

类装饰器、属性装饰器、方法装饰器、参数装饰器。
装饰器的写法
普通装饰器（无法传参）、装饰器工厂（可以传参）。

1、类装饰器：在类声明之前声明（紧挨着类声明）

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

 function logClass(params:any){
    // console.log(params)
    params.prototype.name = '张三';
    params.prototype.run = function (){
        console.log(this.name+'在跑')
    }
    }

    @logClass
    class Http{
        public name:String | undefined;
        constructor(){

        }
        getData():void{
            console.log(this.name)
        }
    }
    var h:any = new Http();
    h.getData();
    h.run();

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

 function logClass(params:string):any{
        return function(target:any){
            target.prototype.name = params;
            target.prototype.run = function (){
                console.log(this.name+'在跑')
            }
        }
        }
    
        @logClass('李四')
        class Http{
            public name:String | undefined;
            constructor(){
    
            }
            getData():void{
                console.log(this.name)
            }
        }
        var h:any = new Http();
        h.getData();
        h.run();

类装饰器重载一个构造函数

function logClass(params:any){
    return class extends params{
        name = '李四';
        getData():void{
            console.log(this.name)
        }
    }
    }

    @logClass
    class Http{
        public name:String | undefined;
        constructor(){
            this.name = '张三';

        }
        getData():void{
            console.log(this.name)
        }
    }
    var h:any = new Http();
    h.getData();

2、属性装饰器

两个参数：第一个是构造函数（实例来说是原型对象），第二是成员的名字（属性名）

function logClass(params:string):any{
    return function(target:any,attr:any){
        // console.log(target)    构造函数
        // console.log(attr)      属性名称
        target[attr] = params;
        target.run = function (){
            console.log(this.name+'在跑')
        }
    }
    }

    class Http{
        @logClass('王五')
        public name:String | undefined;
        constructor(){

        }
        getData():void{
            console.log(this.name)
        }
    }
    var h:any = new Http();
    h.getData();
    h.run();

3、方法装饰器

三个参数：第一个是构造函数（实例来说是原型对象），第二是方法名，第三个是方法的描述（desc.value就是方法本身）

    function logClass(params:string):any{
        return function(target:any,methodName:any,desc:any){
             console.log(target)    //构造函数(原型对象)
             console.log(methodName)      //方法名称
             console.log(desc)      //方法描述
             console.log(desc.value)   //方法本身
             console.log(params)    //传入参数
        var method = desc.value;
        desc.value = function (...args:any[]){
           args =  args.map((value)=>{
                return String(value)
            })
            // console.log(args);
            method.apply(this,args);
        }

         }
        }
    
        class Http{
            public name:String | undefined;
            constructor(){
    
            }
            @logClass('晨晨')
            getData(...args:any[]):void{
                console.log(args)
            }
        }
        var h:any = new Http();
         h.getData(125,'5556');

4、方法参数装饰器

三个参数：第一是构造函数（实例来说是原型对象），第二是方法名，第三个是参数在参数中 的索引

function logClass(params:string):any{
    return function(target:any,methodName:any,paramsIndex:any){
         console.log(target)    //构造函数(原型对象)
         console.log(methodName)      //方法名称
         console.log(paramsIndex)      //方法描述
         console.log(params)    //传入参数
     }
    }

    class Http{
        public name:String | undefined;
        constructor(){

        }
        
        getData(@logClass('小罗') uuid:any):void{
            console.log(uuid)
        }
    }
    var h:any = new Http();
     h.getData(50);

装饰器执行的顺序

属性装饰器—方法装饰器----方法参数装饰器----类装饰器
如果有多个同样的装饰器，它会从后向前执行。