typescript中的装饰器

装饰器是一种特殊类型的声明，它能够被附加到类，方法，属性或参数上，可以修改类的行为，通俗的讲装饰器就是一个方法，可以注入到类，方法，性或参数上来扩展类、方法，属性或参数的功能。常见的装饰器有：类装饰器,方法装饰器,属性装饰器，参数装饰器。
装饰器的写法：普通装饰器（无法传参），装饰器工厂（可传参），装饰器是过去几年中JS最大的成就之一，已是ES7的标准特性之一

类装饰器

类装饰器：普通装饰器(无法传参)

// 类装饰器 : 普通装饰器 (不能传参)
function logClass(params:any){ 
    console.log(params); // params 代表当前类
    params.prototype.name = "普通装饰器的属性";
    params.prototype.run = function(){
        console.log("普通装饰器原型动态添加方法")
    }
}

@logClass
class HttpClient{
}
const http:any = new HttpClient();
console.log(http.name);
http.run();

装饰器:工厂装饰器(可传参)

// 类装饰器：工厂装饰器(可以传参)
function logClass(param:string){
    return function(target:any){
        console.log(target) // target 当前类
        console.log(param) // param 当前类传进来的参数
        target.prototype.url = param;
    }
}
@logClass("http:www.xiaoniuniu.com")
class HttpClient{

}
var httpClient:any = new HttpClient();
console.log(httpClient.url); 

属性装饰器

属性装饰器会被应用到属性描述上，可以用来监视，修改或替换属性的内容

属性装饰器会在运行时传入两个参数

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

​ 2.成员的名字

// 属性装饰器
function logProperty(params:any){ // params就是当前类传递进来的参数
    return function(target:any,attr:any){
        console.log(target)
        console.log(params)
        target[attr] = params;
    }
}

class HttpClient{
    @logProperty("http:www.niuxiaoniu.com")
    public url :any | undefined;

    getData(){
        console.log(this.url);
    }
}
var http = new HttpClient()
console.log(http.url)

方法装饰器

方法装饰器会被应用到方法描述上，可以用来监视、修改或者替换方法定义

方法装饰器会在运行时传入下列3个参数

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

2.成员的名字

3.成员的属性描述符

function get(param:any){
    return function(target:any,methodName:any,desc:any){
        console.log(target)
        console.log(methodName)
        console.log(desc)
        target.urlAPI = param;
        target.run = function(){
            console.log("方法装饰器")
        }
    }
}

class HttpClient{
    url : any | undefined;
    constructor(){

    }
    @get("http://www.niuxiaoniu.com")
    getData(){
        console.log(this.url)
    }
}
const http:any = new HttpClient();
console.log(http.urlAPI)

方法参数装饰器

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

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

2.方法的名字。

3.参数在函数参数列表中的索引。

function logParam(param:any){
    return function(target:any,methodName:any,paramIndex:any){
        console.log(target)
        console.log(methodName)
        console.log(paramIndex)
        target.urlAPI = param;
    }
}
class HttpClient{
    getData(@logParam("123456") uuid:any){
        console.log(uuid);
    }
}
const http:any = new HttpClient();
http.getData(123456);
console.log(http.urlAPI)

装饰器执行顺序

装饰器执行顺序 ： 属性装饰器 ————> 方法装饰器 ————> 方法参数装饰器 ————> 类装饰器