【Typescript】装饰器-一一网

装饰器：是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为

通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。

常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）

装饰器是过去几年中js最大的成就之一，已经是Es7的标准特性之一

装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）

普通装饰器（无法传参）

function logClass(target:any){
//target得到是HttpClient
//可以在不修改类的前提下扩展类的方法和属性
    target.prototype.apiUrl = '动态扩展的属性'
}
//紧靠着类声明
@logClass
class HttpClient{
    constructor(){}
    getData(){}
}
let http:any=new HttpClient();
console.log(http.apiUrl) // 动态扩展的属性
。。。也可以扩展方法
复制代码

装饰器工厂（可传参）使用多

function logClass(params:string){
    return function(target:any){
        //可以在不修改类的前提下扩展类的方法和属性
        params.prototype.apiUrl = params
    }
}
@logClass('动态扩展的属性')
class HttpClient{
    constructor(){}
    getData(){}
}
let http:any=new HttpClient();
console.log(http.apiUrl) // 动态扩展的属性
。。。也可以扩展方法
复制代码

类装饰器

类装饰器在类声明之前被声明（紧靠着类声明），应用于类构造函数，可以用来监视、修改或替换类定义，可以在不修改类的前提下扩展类的方法和属性。

类装饰还可以重载构造函数和方法、属性。

类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

可以修改类的当前函数功能，还能替换构造函数、属性和方法

function logClass(target:any){
//如果类装饰器返回一个值，它会使用提供的构造函数来替代类的声明。
    return class 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(){}
}
let http:any=new HttpClient();
console.log(http.apiUrl) // 我是修改后的数据
http.getData() //我是修改后的数据--
复制代码

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
成员的名字

function logClass(target:any){
//target得到是HttpClient
//可以在不修改类的前提下扩展类的方法和属性
    target.prototype.apiUrl = '动态扩展的属性'
}
function logProperty(params:any){
    //两个参数
    return function(target:any,attr:any){
        console.log(target) //原型对象
        console.log(attr) //apiUrl
        target[attr] = params;
        
    }
    
}
//紧靠着类声明，不要加分号
@logClass
class HttpClient{
    //紧靠着属性，不要加分号
    @logProperty('http://test.com')
    public apiUrl: any | undefined;
    constructor(){}
    getData(){
        console.log(this.url)
    }
}
let http:any=new HttpClient();
console.log(http.apiUrl)  // http://test.com
复制代码

方法装饰器

它会被应用到方法的属性描述上，可以用来监视，修改或者替换方法定义。
方法装饰器会在运行时传入下列3个参数：

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

function get(params:any){
    return function(target:any,methodName:any,desc:any){
        console.log(params)  //http://test.com
         console.log(methodName)  //getData
         console.log(desc)  //{writable:true...}    
         //扩展属性
         target.apiUrl = params
         //扩展方法
         target.run=function(){
             console.log('run')
         }
         //扩展属性和方法跟类装饰器功能相同，还可以修改方法
         需要修改desc.value,它是被修饰的方法
         //要求：修改装饰器的方式，把装饰器方法里面传入的所有参数改为string类型
         1. 保存当前的方法
         var oldMethod = desc.value
         2. 把args中每一项转化成string类型
         desc.value=function(...args:any[]){
             args = args.map((item)=>{
                 return String(item)
             })
             替换
             console.log(args) // ['123','我是字符串']
             //不加后面那句就替换了老方法
             //修改老方法
             oldMethod.apply(this,args)  //当调用http.getData(1213,'我是字符串')，此处会被调用
         }
    }
}

class HttpClient{
    public url: any | undefined;
    constructor(){}
    @get('http://test.com')
    getData(){
        console.log('我是getData里面的方法')
    }
}
let http:any=new HttpClient();
console.log(http.apiUrl)  // http://test.com
http.run() //run
http.getData(1213,'我是字符串')
复制代码

方法参数装饰器

参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列3个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
方法的名字
参数在函数参数列表中的索引

function logParams(params:any){
    return function(target:any,methodName:any,paramsIndex:any){
        console.log(params)  //http://test.com
         console.log(methodName)  //getData
         console.log(paramsIndex)  //0      
         //为类的原型增加一些元素数据 ，在target上增加一些元素
         target.apiUrl = params
    }
}

class HttpClient{
    public url: any | undefined;
    constructor(){}
    getData(@logParams('http://test.com') uid:any)){
        console.log(uid) //123
    }
}
let http:any=new HttpClient();
http.getData(123)
console.log(http.apiUrl)  // http://test.com
复制代码