TypeScript学习: 十二、TS中的装饰器

2023-10-03 23:45:22

前言

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

类修饰器

装饰器在类声明之前被执行，类装饰器应用于类构造函数，可以用来监视，修改或者代替类定义

类普通装饰器：

function logClass(params: any) { 
    console.log(params); 
}


@logClass
class HttpClient{
    constructor() {

    }
    getData() {

    }
 }

定义了一个 logClass 类并且带了一个默认参数 params

这个 params == HttpClinent

function logClass(params: any) {
    console.log(params); 
    params.prototype.httpUrl = "http.xxxxx"; // 通过原型链添加一个 给类添加一个属性
}


@logClass
class HttpClient{
    constructor() {

    }
    getData() {

    }
 }

var httpClient = new HttpClient();
console.log(httpClient.httpUrl);

运行结果：

通过类装饰器添加方法

function logClass(params: any) {
    console.log(params); 
    params.prototype.httpUrl = "http.xxxxx"; // 通过原型链添加一个 给类添加一个属性

    params.prototype.run = function() {
        console.log("run-app");
    }
}

@logClass
class HttpClient{
    constructor() { }
    getData() { }
 }

var httpClient = new HttpClient();
console.log(httpClient.httpUrl);
httpClient.run(); // 执行通过装饰器添加的方法

类装饰器工厂：

function logClass(params: string) {
    console.log(params); // 传入的参数类型
   return function(tarage:any) { 
        // tarage == HttpClient
   }
}

@logClass("传入参数")
class HttpClient{
    constructor() { }
    getData() { }
}

var httpClient = new HttpClient();

如果是装饰器工厂必须要写入参数 @logClass("传入参数")

可以根据装饰器传入的参数去实现需要的功能

function logClass(params: string) {
    console.log(params); // 传入的参数类型
   return function(tarage:any) { 
        // tarage == HttpClient
        tarage.prototype.apiUrl = params; // 通过原型链修改 类的属性
   }
}

@logClass("http://xxxxxx123")
class HttpClient{
    constructor() { }
    getData() { }
}

var httpClient = new HttpClient();

而且还可以重载 构造函数

function logClass(target: any) {
    console.log(target);
   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() { 
        console.log(this.apiUrl);
    }
}

var httpClient = new HttpClient();
console.log(httpClient.apiUrl)
httpClient.getData();

属性装饰器

属性装饰器表达式会在运行时当作函数调用，传入2个参数 * 第一个参数：对于静态成员来说是类的构造函数，对于实例化成员是类的原型对象 * 第二个参数：成员名字

function logProperty(params: any) {
    console.log("接收传入的参数", params);
    return function(tarage: any, attr: any) {
        console.log("参数一：", tarage); // 对于实例化成员是类的原型对象
        console.log("参数二：", attr);// 成员名字
    }
}

class HttpClient{
    
    @logProperty("test")
    public url:string|undefined; // 这个属性使用 属性装饰器
    
    constructor() {   }
    getData() {  }
}

通过参数一修改属性值：

function logProperty(params: any) {
    console.log("接收传入的参数", params);
    return function(tarage: any, attr: any) {
        console.log("参数一：", tarage); // 对于实例化成员是类的原型对象
        console.log("参数二：", attr);// 成员名字
        tarage[attr] = params; // 这里修改属性值
    }
}

class HttpClient{
    
    @logProperty("test")
    public url:string|undefined; // 这个属性使用 属性装饰器
    
    constructor() {   }
    getData() { 
        console.log( "url属性值", this.url);
     }
}

var httpClient = new HttpClient();
httpClient.getData(); // 输出     url属性值 test

方法装饰器

它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义 * 方法装饰器会在运行时传入3个参数 * 参数一：对于静态成员来说是类的构造函数，对于实例成员是类的原型 * 参数二：成员名字 * 参数三：成员的属性描述符。

function logMethod(params:any) {
    console.log("调用传入的参数", params)
    return function(tarage:any, methodName: string, desc:any){
        console.log("参数一", tarage); // 实例成员是类的原型
        console.log("参数二", methodName); // 成员名字， 方法名
        console.log("参数三", desc); // 描述
    }
}



class HttpClient{
    
    public url:string|undefined;
    
    constructor() {   }

    @logMethod("get")
    getData() { // 这个方法使用了 装饰器
        console.log( "url属性值", this.url);
     }
}

第一个参数是实例成员的原型，可以通过它给原型添加属性或方法

function logMethod(params:any) {
    console.log("调用传入的参数", params)
    return function(tarage:any, methodName: string, desc:any){
        console.log("参数一", tarage); // 实例成员是类的原型
        console.log("参数二", methodName); // 成员名字， 方法名
        console.log("参数三", desc); // 描述

        tarage.api = "我是装饰器添加的 属性";
        tarage.run = function() {
            console.log("我是装饰器添加的方法");
        }
    }
}



class HttpClient{
    
    public url:string|undefined;
    
    constructor() {   }

    @logMethod("get")
    getData() { // 这个方法使用了 装饰器
        console.log( "url属性值", this.url);
     }
}

var httpClient = new HttpClient();
console.log(httpClient.api); // 输出： 我是装饰器添加的 属性
httpClient.run();  // 输出 我是装饰器添加的方法

第三个参数是 描述    
修改装饰器方法， 把装饰器方法里面的所有参数修改为string类型

function logMethod(params:any) {
    console.log("调用传入的参数", params)
    return function(tarage:any, methodName: string, desc:any){
       
       console.log(desc.value); // 输出 function() { console.log( "url属性值", this.url);}
       var methodFun = desc.value;
       desc.value = function(...args:any) { // 重写 getData 方法
            args = args.map((value:any)=>{
                return String(value);
            });
            console.log(args);

            // 使用对象冒充， 还原之前的函数
            methodFun.apply(this, args); // 执行输出 我是getData方法
       }
    }
}

class HttpClient{
    
    public url:string|undefined;
    
    constructor() {   }

    @logMethod("get")
    getData(...args:any) { // 这个方法使用了 装饰器
        console.log(args);// 输出： Array(2) ["123", "adb"]
        console.log( "我是getData方法");
     }
}

var httpclient = new HttpClient();
httpclient.getData(123, "adb");  // 输出： Array(2) ["123", "adb"]

方法参数装饰器

参数装饰器表达式会在运行时当作函数调用，可以使用参数装饰器为类的原型增加一些元素数据，传入三个参数：
参数一：对于静态成员来说是类的构造函数，对于实例成员是类的原型对象参数二：方法名称参数三：参数在函数参数列表中的索引

function logParams(params:any) {
    return function(target:any,methodName:any,paramsIndex:number){
        console.log(params);// 我是装饰器参数
        console.log(target); // Object {getData: , constructor: }
        console.log(methodName); // getData
        console.log(paramsIndex);// 0
    }
}

class HttpClient{
    public url:string|undefined;
    constructor() {   }

    getData(@logParams("我是装饰器参数")uuid:any) { // 这个方法使用了 装饰器
        console.log(uuid);
        console.log( "我是getData方法");
     }
}

var httpClinet = new HttpClient();
httpClinet.getData("test");

注意装饰器的执行顺序：

属性装饰器>方法装饰器>方法参数装饰器>类装饰器

如果一个方法有两个装饰器，那么后面的装饰器先执行，再到前面的

码农公寓

前言