TypeScript学习第十篇 － 装饰器

// 装饰器
function logClass(params:any){
    
    // params就是当前的类HttpClient

    // 通过装饰器给类扩展属性
    params.prototype.url="www.baidu.com";

    // 通过装饰器给类扩展方法
    params.prototype.run = function(){
        console.log('this is run function');
    }
}

@logClass
class HttpClient{
    constructor(){

    }
    getData(){

    }
}
var http = new HttpClient();

console.log(http.url);
// www.baidu.com

http.run();
// this is run function'

// 装饰器
function logClass(params:any){
    return function(target:any){
        // target就是当前的类HttpClient

        // 通过装饰器给类扩展属性
        target.prototype.url = params;
        // 通过装饰器给类扩展方法
        target.prototype.run = function(){
            console.log(this.url);
        };
    }
}

@logClass('www.baidu.com')
class HttpClient{
    constructor(){

    }
    getData(){

    }
}

var http = new HttpClient();
console.log(http.url);
// www.baidu.com

http.run();
// www.baidu.com

function logClass(target:any){
    // tartget为当前类HttpClient
    return class extends target{
        // 重载构造函数里的属性与方法
        url:any = '我是装饰器里的url';
        getData(){
            this.url = '我是装饰器里修改过后的url';
            console.log(this.url);
        }
    }
}

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

var http = new HttpClient();
http.getData();
// 我是装饰器里修改过后的url

// 属性装饰器
function logPrototype(params:string){
    return function(target:any,attr:any){
        // target 如果是静态成员则是类的构造函数
        // target 如果是实例成员则是类的原型对象
        // attr 为当前的参数
        target[attr]=params;
    }
}
class HttpClient{
    @logPrototype('www.qq.com')
    public url:string | undefined;
    constructor(){
        
    }
    getData(){
       console.log(this.url);
    }
}

var http = new HttpClient();
http.getData();
// www.qq.com

// 方法装饰器
function logMethod(params:any){
    return function(target:any,methodName:any,desc:any){
        // target 如果是静态成员则是类的构造函数
        // target 如果是实例成员则是类的原型对象
        // methodName 为当前方法
        // desc 为方法的描述,包含是配置、枚举、可写等信息

        // 在装饰里扩展类的属性和方法
        target.apiUrl = 'www.qq.com';
        target.run = function(){
            console.log('this is run function');
        }

    }
}

class HttpClient{
    public url:string | undefined;
    constructor(){}
    @logMethod('www.baidu.com')
    getData(){

    }
}

var http = new HttpClient();
// console.log(http.apiUrl);
// www.qq.com

// http.run();
// this is run function

// 方法装饰器
function logMethod(params:any){
    return function(target:any,methodName:any,desc:any){
        // target 如果是静态成员则是类的构造函数
        // target 如果是实例成员则是类的原型对象
        // methodName 为当前方法
        // desc 为方法的描述,包含是配置、枚举、可写等信息

        // 修改装饰器的方法
        // 把装饰器方法里所传入的参数全部改为string类型

        // 1.保存之前的方法
        var oldMethod = desc.value;
        // 2.操作数据
        desc.value = function(...args:any[]){
            args = args.map((value)=>{
                return String(value);
            })
            // 3.对象冒充继承
            oldMethod.apply(this,args);
        }
    }
}

class HttpClient{
    public url:string | undefined;
    constructor(){}
    @logMethod('www.baidu.com')
    getData(...args:any[]){
        console.log(args);
        console.log('this is getData function')
    }
}

var http = new HttpClient();

http.getData(1000,2000);
// [ '1000', '2000' ]
// this is getData function

function logParams(params:any){
    return function(target:any,methodName:any,paramsIndex:any){
        console.log(params); 
        // username 
        console.log(target); 
        // HttpClient { getData: [Function] }
        console.log(methodName); 
        // getData
        console.log(paramsIndex); 
        // 0

        // 通过属性装饰器给当前类扩展属性
        target.currentUser = params;

    }
}
class HttpClient{
    public url:string | undefined;
    constructor(){}
    getData(@logParams('username') username:any){
        console.log(username);     
        // aiguangyuan
    }
}
var http = new HttpClient();
http.getData('aiguangyuan');
console.log(http.currentUser);
// username