(精华2020年6月4日更新)TypeScript中装饰器的使用

类装饰器

//----------------------基本使用---------------------------
    function logClass(param: string) {
        console.log(param)  //ruanmou

        return function (target: any) {
            // console.log(target);  //target:当前类  HttpClient
            console.log(target)
            target.prototype.apiUrl = 'baidu.com';

        }
    }
    @logClass('ruanmou')
    class HttpClient {
        constructor() {
        }
    }

    var http2: any = new HttpClient();
    //----------------------继承使用---------------------------
    function logClass(target: any) {
        console.log(target);
        return class Test extends target {
            apiUrl: any = '我是修改后的数据'
            getData() {
                // this.apiUrl = this.apiUrl;
                console.log(this.apiUrl);
            }
        }
    }

    @logClass
    class HttpClient {
        public apiUrl: string | undefined;
        constructor() {
            this.apiUrl = '我是构造函数里面的apiurl';
        }
        getData() {
            console.log(this.apiUrl)
        }
    }

    var p2 = new HttpClient();

属性装饰器

function logProperty(param: string) {
        console.log(param) //  ruanmou.com
        // 传入下列2个参数：
        // 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
        // 2、成员的名字。

        return function (target: any, attr: any) {
            //target 类HttpClient的原型对象
            console.log(target)

            console.log(attr)   // attr 使用装饰器的那个属性  ：url
            target[attr] = param;
        }
    }
    class HttpClient {
        //静态属性
        @logProperty('50')
        static age: string | undefined;
        @logProperty('ruanmou.com')
        public url: any | undefined;
        @logProperty('laney')
        public name: string | undefined;
        constructor(str: string) {
        }
        getData() {
            console.log(this.url);
        }
        say() {
            console.log(this.name);
        }
    }
    var r1: any = new HttpClient('aa');

方法装饰器

function get(purl: any, ptype: any) {

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

        return function (target: any, methodName: any, desc: any) {
            // console.log(target)
            // console.log(methodName)
            // console.log(desc)
            //注意：不要重写HttpClient里面的方法
            // 作用：扩展功能，不是用来覆盖原来的功能的
            target.url = '3yteam';

            // target[methodName] = function(){
            //     console.log('方法被改写了');
            // }

            let fun = desc.value; //把原来的方法存起来
            desc.value = function () {
                try {
                    fun(purl, ptype)
                } catch {
                    console.log('msg');
                }
            }

        }
    }
    class HttpClient {
        public url: any | undefined;
        constructor() {
        }
        @get('http://www.baidu.com', 'post')

        //方式一：
        getData() {
            console.log(arguments);
            console.log('我的链接是：' + this.url);
        }
        //方式二：
        // getData(...arg:any[]){
        //     console.log('arg----------');
        //     console.log(arg);
        //     console.log('我的链接是2：'+this.url);
        // }
    }

    var http: any = new HttpClient();

方法中属性装饰器

function logParams(params: any) {
        // 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
        // 2、方法的名字。
        // 3、参数在函数参数列表中的索引。
        return function (target: any, methodName: any, paramsIndex: any) {
          console.log(params);
          console.log(target);
          console.log(methodName);
          console.log(paramsIndex);
          debugger
          target.apiUrl = params;
        };
      }

    class HttpClient {
        public url: any | undefined;
        constructor() {}
        getData(@logParams("3yteam.com") uuid: any) {
          console.log(uuid);
        }
      }
    
      var http: any = new HttpClient();
      http.getData(123456);
      

访问器装饰器

function configable(value:boolean){
// 1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
// 2. 成员的名字。
// 3. 成员的属性描述符。

    return function(target: any, propertyKey: string, desc: PropertyDescriptor){
        desc.configurable = value;
        desc.enumerable = value;
        //访问器属性：可以起到保护的作用
    }
}
class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configable(false)
    get XX() {
        return this._x;
    }
    @configable(false)
    get YY(){
        return this._y;
    }
}

多装饰器

function logClass1(params:string){
        return function(target:any){
          console.log('类装饰器1')
        }
    }
    
    function logClass2(params:string){
        return function(target:any){
          console.log('类装饰器2')
        }
    }
    
    function logAttribute1(params?:string){
        return function(target:any,attrName:any){
          console.log('属性装饰器1')
        }
    }
    
    function logAttribute2(params?:string){
        return function(target:any,attrName:any){
          console.log('属性装饰器2')
        }
    }
    
    function logMethod1(params?:string){
        return function(target:any,attrName:any,desc:any){
          console.log('方法装饰器1')
        }
    }
    function logMethod2(params?:string){
        return function(target:any,attrName:any,desc:any){
          console.log('方法装饰器2')
        }
    }
     
    function logParams1(params?:string){
        return function(target:any,attrName:any,desc:any){
          console.log('方法参数装饰器1')
        }
    }
    
    function logParams2(params?:string){
        return function(target:any,attrName:any,desc:any){
          console.log('方法参数装饰器2')
        }
    }

    @logClass1('http://www.3yteam.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();