The method of execution order typescript decorator decorator method parameters decorator decorator

/*
    Decorator: decorator is a special type of statement, it can be attached to the class declaration, methods, attributes or parameters can modify the behavior of the class.


    Popular talk decorator is a method, functional class, method, up extended attribute parameter classes, attributes, methods, parameters may be injected into.
    

    Common decorators are: class decorator, decorative property, a decorative method, parameter decorator


    Decorator wording: General decorator (can not pass parameters), decoration factory (can pass parameters)


    Decoration is one of the last few years js greatest achievement, is one of the standard features Es7




*/

// 1, class decorator: the decorator class before the class declaration is declared (against the class declaration). Decoration is applied to class class constructor can be used to monitor, modify or replace the class definition. Pass a parameter


// 1.1 class decorator: General decorator (not mass participation) 
    / *
        function logClass(params:any){

            console.log(params);
            // params is the current class
            params.prototype.apiUrl = 'Extended Dynamic Properties';
            params.prototype.run=function(){
                console.log ( 'I'm a run method');
            }

        }

        @logClass
        class HttpClient{
            constructor(){
            }
            getData(){

            }
        }
        var http:any=new HttpClient();
        console.log(http.apiUrl);
        http.run();
    */


// 1.2 decorator class: Decorative factory (available parameter passing)

   
    
        
       /*
        function logClass(params:string){
            return function(target:any){
                console.log(target);
                console.log(params);
                target.prototype.apiUrl=params;
            }
        }

        @logClass('http://www.itying.com/api')
        class HttpClient{
            constructor(){
            }

            getData(){

            }
        }

        var http:any=new HttpClient();
        console.log(http.apiUrl);
       
       */  


/*
    
1, class decorator 

     The following is an example of an overloaded constructor.

     Class decorator expression will be called as a function at run-time, the class constructor as its only parameters.

     If the class returns a decorative value, it replaces the class declaration using the provided constructor.
*/



        /*
        function logClass(target:any){
            console.log(target);
            return class extends target{
                apiUrl: any = 'modified data I';
                getData(){
                    this.apiUrl=this.apiUrl+'----';
                    console.log(this.apiUrl);
                }
            }
        }


        @logClass
        class HttpClient{
            public apiUrl:string | undefined;
            constructor(){
                this.apiUrl = 'I constructor inside apiUrl';
            }
            getData(){
                console.log(this.apiUrl);
            }
        }

        var http=new HttpClient();
        http.getData();

        */







/*
   2, the attribute decorator

        Properties decorator expression will be run as a function is called, passing the following two parameters:
            1, it is for a static member class constructor, for example members of the class prototype object.
            2, names of members.

*/



/*
    // class decorator
        function logClass(params:string){
            return function(target:any){
                // console.log(target);
                // console.log(params);       
                
            }
        }

    // property decorator

        function logProperty(params:any){
            return function(target:any,attr:any){
                console.log(target);
                console.log(attr);
                target[attr]=params;
            }
        }
        @logClass('xxxx')
        class HttpClient{
            @logProperty('http://itying.com')
            public url:any |undefined;
            constructor(){
            }
            getData(){
                console.log(this.url);
            }
        }
        var http=new HttpClient();
        http.getData();
*/





/*
    3. The method decorators
        The attribute descriptor it will be applicable to the method can be used to monitor, modify, or replace defined method.

        Decorative method at run time will pass the following three parameters:
            1, it is for a static member class constructor, for example members of the class prototype object.
            2, names of members.
            3, attribute descriptor members.

*/   
    



/*

    // a method decorator

    function get(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');
            }
        }
    }

    class HttpClient{  
        public url:any |undefined;
        constructor(){
        }
        @get('http://www.itying,com')
        getData(){
            console.log(this.url);
        }
    }

    var http:any=new HttpClient();
    console.log(http.apiUrl);
    http.run();
*/


// method decorator two

    /*
        function get(params:any){
            return function(target:any,methodName:any,desc:any){
                console.log(target);
                console.log(methodName);
                console.log(desc.value);       
                
                // method to change the decorators decorator method which passed all parameter to string type

                // 1, save the current method

                var oMethod=desc.value;
                desc.value=function(...args:any[]){                
                    args=args.map((value)=>{
                        return String(value);
                    })
                    oMethod.apply(this,args);
                }

            }
        }

        class HttpClient{  
            public url:any |undefined;
            constructor(){
            }
            @get('http://www.itying,com')
            getData(...args:any[]){
                console.log(args);
                the console.log ( 'I getData methods inside');
            }
        }

        var http=new HttpClient();
        http.getData(123,'xxx');
    */



/*
    4, method parameters decorator 

        Parameters decorator expression will be treated at runtime function is called, you can use parameters decorator to add some elements of the data for the prototype class, passing the following three parameters:

            1, it is for a static member class constructor, for example members of the class prototype object.
            2, the name of the method.
            3, the index parameter in the function parameter list.
*/


// function logParams(params:any){

//     return function(target:any,methodName:any,paramsIndex:any){

//         console.log(params);

//         console.log(target);

//         console.log(methodName);

//         console.log(paramsIndex);


//         target.apiUrl=params;

//     }   

// }

// class HttpClient{  
//             public url:any |undefined;
//             constructor(){
//             }           
//             getData(@logParams('xxxxx') uuid:any){               
//                 console.log(uuid);
//             }
//  }


//  var http:any = new HttpClient();
//  http.getData(123456);
// console.log( http.apiUrl);










// execution order decorator


// Properties "Method" Method Parameter "class

// If there is more of the same decorators, it will first perform back


function logClass1(params:string){
    return function(target:any){
      the console.log ( 'class decorator 1' )
    }
}

function logClass2(params:string){
    return function(target:any){
      the console.log ( 'class decorative 2' )
    }
}

function logAttribute1(params?:string){
    return function(target:any,attrName:any){
      the console.log ( 'Attribute decorator 1' )
    }
}

function logAttribute2(params?:string){
    return function(target:any,attrName:any){
      the console.log ( 'Attribute decorative 2' )
    }
}

function logMethod1(params?:string){
    return function(target:any,attrName:any,desc:any){
      the console.log ( 'decorator Method 1' )
    }
}
function logMethod2(params?:string){
    return function(target:any,attrName:any,desc:any){
      the console.log ( 'Decoration Method 2' )
    }
}



function logParams1(params?:string){
    return function(target:any,attrName:any,desc:any){
      the console.log ( 'method parameters decorator 1' )
    }
}

function logParams2(params?:string){
    return function(target:any,attrName:any,desc:any){
      the console.log ( 'method parameters decorative 2' )
    }
}



@logClass1('http://www.itying.com/api')
@logClass2('xxxx')
class HttpClient{
    @logAttribute1()
    @logAttribute2()
    public apiUrl:string | undefined;
    constructor(){
    }

    @logMethod1()
    @logMethod2()
    getData(){
        return true;
    }

    setData(@logParams1() attr1:any,@logParams2() attr2:any,){

    }
}

var http:any=new HttpClient();