typescript的装饰器

1、什么是装饰器呢？

装饰器是一个方法，可以注入到类，方法，属性参数上来扩展类、属性、方法、参数的功能(不改变原有结构的情况下，对原解构进行修饰)；

装饰器分类：类装饰器，属性装饰器，方法装饰器，参数装饰器；

装饰器在写法上分为：普通装饰器（无法传参），装饰器工厂（可传参）；

装饰器的执行顺序： 属性》方法》方法参数》类（如果有多个同样的装饰器，他会先执行后面的）

2、下面我们就来分别实现一下各种装饰器的写法

2.1 类装饰器：类装饰器在类声明之前。类装饰器应用于类构造函数，可以用来监视、修改或者替换定义。传入一个参数。

// 装饰器工厂：給Teacher类增加方法

function Address(parmas:any){
    return function(target:any){
        console.log(parmas) //parmas是传入的参数
        console.log(target) //target是其装饰的类本身
        target.prototype.address = function(){
           // 可以在target上添加方法和属性
        }
        return true
    }
}
@Address('shenzhen')
class Teacher{
    constructor(){}
}
const teacher:any = new Teacher()
console.log(teacher.address())

2.2 属性装饰器：属性装饰器表达式会在运行时当作函数被调用，传入两个参数： 1、对静态成员来说是类的构造函数，对于实例成员来说是原型对象 2、属性

function Attr(parmas:any){
    return function(target:any,attr:any){
        console.log(params)  //装饰器中传入的值
        console.log(target)  // 装饰的类本身
        console.log(attr)  // url, attr就是url的属性
        target[attr] = parmas //类的属性等于传入的参数
    }
}

class getUrl{
    @Attr('www.baidu.com')
    public url: string | undefined
    constructor(){}
    getData(){
       console.log(this.url)
    }
}
getData
const address = new getUrl()
address.getData()  //www.baidu.com

2.3 方法装饰器：可以用来监视修改或者替换方法定义，有三个参数： 1、对静态成员来说是类的构造函数，对于实例成员来说是原型对象 2、类的方法名 3、成员的属性描述符

// 添加属性和方法
function Get(parmas:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target) // constructor,getData  原型对象
        console.log(methodName)  //getData方法名
        console.log(desc)  //描述
        
        target.addAttr = '给我添加了属性'
        target.run = function(){
           console.log('给我添加的方法')
        }
    }
}

class Test{
    public url: any | undefined
    constuctor(){}
    @Get('www.baidu.com')
    getData(){
        console.log(this.url)
    }
}

const data:any = new Test()
data.getData()
data.run()
console.log(data.addAttr) //**给我添加了属性**