TS Decorator

装饰器

• 装饰器是实现 AOP（面向切面）编程的一种重要方式。
• 装饰器是一种特殊类型的声明，本质上就是一个方法，可以注入到类、方法、属性、参数上，扩展其功能；
• 常见的装饰器：
  • 类装饰器、
  • 属性装饰器、
  • 方法装饰器、
  • 参数装饰器...
• 装饰器在写法上有：
  • 普通装饰器(无法传参)、
  • 装饰器工厂(可传参)
• 装饰器已是ES7的标准特性之一，是过去几年JS最大的成就之一

启用装饰器

// tsconfig.json 中添加

    "compilerOptions": {
        "experimentalDecorators": true
    }

类装饰器

• 类装饰器在类声明之前被声明，应用于类构造函数，可以监视、修改、替换类的定义，传入一个参数

function logClz(params:any) {
    console.log(params)  // class HttpClient
}

@logClz
class HttpClient {
    constructor() {}
}

function logClz(params:any) {
    params.prototype.url = 'xxxx';
    params.prototype.run = function() {
        console.log('run...');
    };
}

@logClz
class HttpClient {
    constructor() {}
}
var http:any = new HttpClient();
http.run(); // run...

装饰器工厂:闭包

function logClz(params:string) {
    console.log('params:', params);  // params: hello
    return function(target:any) {
        console.log('target:', target);  // target: class HttpClient
        target.prototype.url = params;  // 扩展一个url属性
    }
}

@logClz('hello')
class HttpClient {
    constructor() { }
}

var http:any = new HttpClient();
console.log(http.url);  // hello

// 如果参数可选的话，参数可省略，但是（），小括号不能省略；
function logClz(params?:string) {
    return function(target:any) { }
}

@logClz()
class HttpClient {
    constructor() { }
}

重载构造函数

• 类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数
• 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明

function logClz(target:any) {
    return class extends target {
        url = 'change url'
        getData() {
            console.log('getData:', this.url);
        }
    }
}

@logClz
class HttpClient {
    public url:string|undefined;
    constructor() {
        this.url = 'init url'
    }
    getData() {
        console.log(this.url);
    }
}

var http = new HttpClient();  // 装饰器返回的就是HttpClient的子类，因此TS可以自动推导 http 的类型
http.getData(); //getData: change url

修改类的定义

function fn<T extends {new(...args: any[]): {}}>(constructor: T): T {
    class Ps extends constructor {
        age: number = 20;   //扩展一个类型为number的属性age
    }
    return Ps;
}

@fn
class Person{
}

let p:any = new Person(); //装饰之后的Person已经变成了Ps
console.log(p.age)  //20

function fn(v: number) {
    return function<T extends {new(...args: any[]): {}}>(cst: T): T {
        class Ps extends cst {
            age: number = v;
        }
    }
}
@fn(10)
class Person { }  //age:number = 10
@fn(20)
class Cat { }  //age:number = 20

属性装饰器

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

function logProp(params:any) {
    return function(target:any, attr:any) {
        console.log(target)  // { constructor:f, getData:f } 
        console.log(attr)  // url
        target[attr] = params;  //通过原型对象修改属性值 = 装饰器传入的参数
        target.api = 'xxxxx';  //扩展属性
        target.run = function() {  //扩展方法
            console.log('run...');
        }
    }
}
class HttpClient {
    @logProp('<http://baidu.com>')
    public url:any|undefined;
    constructor() { }
    getData() {
        console.log(this.url);
    }
}
var http:any = new HttpClient();
http.getData();  // <http://baidu.com>
console.log(http.api);  // xxxxx
http.run();  // run...

方法装饰器

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

function get(params:any) {
    console.log(params) // 装饰器传入的参数：<http://baidu.com>
    return function(target:any, methodName:any, desc:any) {
        console.log(target)  // { constructor:f, getData:f } 
        console.log(methodName)  // getData
        console.log(desc)  // {value: ƒ, writable: true, enumerable: false, configurable: true} value就是方法体
        /* 修改被装饰的方法 */
        //1. 保存原方法体
        var oldMethod = desc.value;
        //2. 重新定义方法体
        desc.value = function(...args:any[]) {
            //3. 把传入的数组元素都转为字符串
            let newArgs = args.map((item)=>{
                return String(item);
            });
            //4. 执行原来的方法体
            oldMethod.apply(this, newArgs);
            // 等效于 oldMethod.call(this, ...newArgs);
        }
    }
}
class HttpClient {
    constructor() { }

    @get('<http://baidu.com>')
    getData(...args:any[]) {
        console.log('getData: ', args);
    }
}
var http = new HttpClient();
http.getData(1, 2, true);  // getData: ["1", "2", "true"]

方法参数装饰器

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

<aside> 💡 参数装饰器只能用来监视一个方法的参数是否被传入； 参数装饰器在Angular中被广泛使用,特别是结合reflect-metadata库来支持实验性的Metadata API 参数装饰器的返回值会被忽略。

</aside>

function logParams(params:any) {
    console.log(params)  // 装饰器传入的参数：uuid
    return function(target:any, methodName:any, paramIndex:any) {
        console.log(target)  // { constructor:f, getData:f } 
        console.log(methodName)  // getData
        console.log(paramIndex)  // 0
    }
}
class HttpClient {
    constructor() { }
    getData(@logParams('uuid') uuid:any) {
        console.log(uuid);
    }
}

装饰器的执行顺序

• 装饰器组合：TS支持多个装饰器同时装饰到一个声明上，语法支持从左到右，或从上到下书写；

  • @f @g x

  • @f

  • @g

  • x

• 在TypeScript里，当多个装饰器应用在一个声明上时会进行如下步骤的操作
  • 由上至下依次对装饰器表达式求值;
  • 求值的结果会被当作函数，由下至上依次调用.
• 不同装饰器的执行顺序：属性装饰器 > 方法装饰器 > 参数装饰器 > 类装饰器

function logClz11(params:string) {
    return function(target:any) {
        console.log('logClz11')
    }
}
function logClz22(params?:string) {
    return function(target:any) {
        console.log('logClz22')
    }
}
function logAttr(params?:string) {
    return function(target:any, attrName:any) {
        console.log('logAttr')
    }
}
function logMethod(params?:string) {
    return function(target:any, methodName:any, desc:any) {
        console.log('logMethod')
    }
}
function logParam11(params?:any) {
    return function(target:any, methodName:any, paramIndex:any) {
        console.log('logParam11')
    }
}
function logParam22(params?:any) {
    return function(target:any, methodName:any, paramIndex:any) {
        console.log('logParam22')
    }
}

@logClz11('<http://baidu.com>')
@logClz22()
class HttpClient {
    @logAttr()
    public url:string|undefined;

    constructor() { }

    @logMethod()
    getData() {
        console.log('get data');
    }

    setData(@logParam11() param1:any, @logParam22() param2:any) {
        console.log('set data');
    }
}
// logAttr --> logMethod --> logParam22 --> logParam11 --> logClz22 --> logClz11

 Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.https://serious-lose.notion.site/TS-Decorator-f9c67445f6854e5b9167edeb488ffdc5