TpyeScript学习之路06 装饰器

装饰器执行顺序
属性>方法>方法参数>类
如果有多个同样的装饰器，先执行后面的

装饰器：装饰器是一种特殊类型的声明，他能够附加到类声明，方法，属性或参数上，可以修改类的行为；
装饰器就是一个方法，可以注入到类，方法，属性参数上来扩展类，属性，方法，参数的功能。
常见的装饰器有：类装饰器，属性装饰器，方法装饰器，参数装饰器。
装饰器的写法：普通装饰器（无法传参），装饰工厂（可传参）

1，普通类装饰器

//必须传入params参数
function decorator(params:any){
    //params就是当前类Decorator
    console.log(params);
    params.prototype.url = "动态扩展的属性";
    params.prototype.run = function(){}
}
//指定装饰器，后面不能带分号
@decorator
class Decorator{
    constructor(){}
    getData(){}
}
var deco:any = new Decorator();
console.log(deco.url)

2装饰工厂（可传参）

function decoratorFactory(params:string){
    //params就是传入的http:www.xxx.com
    return function(target:any){
        //target就是当前类DecoratorFactory
    }
}
//指定装饰器，后面不能带分号
@decoratorFactory("http:www.xxx.com")
class DecoratorFactory{
    constructor(){}
    getData(){}
}

3重载类装饰器

function decoratorOverload(target:any){
    return class extends target{
        apiUrl:any = "我是修改后的数据";
        getData(){}
    }
}
@decoratorOverload
class DecoratorOverload{
    public apiUrl: string | undefined;
    constructor(){
        this.apiUrl = "我是构造函数里的url"
    }
    getData(){}
}

4属性装饰器

function decorator(params:any){
    return function(target:any,attr:any){
        console.log(attr)//api
        console.log(params)//http:www.xx.com
        console.log(target)//当前类
    }
}
class Decorator{
    @decorator("http:www.xx.com")
    public api:any | undefined;
    constructor(){}
    getData(){}
}

5方法装饰器：方法装饰器在运行时传入三个参数
1，对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2，成员对象
3，成员的属性描述

function decorator(params:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target)//当前类
        console.log(methodName)//getData
        console.log(desc)//描述
        //扩展
        target.url = "xxx";
        target.run = function(){
            console.log("ss")
        }
        //修改getData 将所有参数换成string类型
        //1,保存当前方法
        var method = desc.value;
        desc.value = function(...args:any[]){
            args = args.map((value) => {
                return String(value);
            })
            //2,保持原有方法里面的功能
            method.apply(this,args);
        }
    }
}

class Decorator{
    public api:any | undefined;
    constructor(){}
    @decorator("http:www.xx.com")
    getData(...args:any[]){
        console.log(args)
    }
}
var dec = new Decorator();
dec.getData(123,"xxx");