TypeScript - 装饰器

1. 装饰器就是一个方法, 可以注入到类/方法/属性/参数上来扩展其功能


2. 类装饰器 (普通装饰器)

    // 声明装饰器, clazz会接收到使用这个装饰器的类
    function fnDemo(clazz: any) {
        // 扩展属性
        clazz.prototype.value = '扩展属性';
        // 扩展方法
        clazz.prototype.run = function() {
            console.log('扩展方法');
        }
    }

    // 使用装饰器, 在类上直接加
    @fnDemo() 
    class Demo {
    }

    var demo: any = new Demo();
    console.log(demo.value);
    demo.run();


3. 类装饰器 (装饰器工厂, 可传参)

    function fnDemo(value: string) {
        return function (clazz: any) {
            clazz.prototype.value = value;
            clazz.prototype.run = function() {
                console.log('扩展方法');
            }
        }
    }

    @fnDemo('hello')
    class Demo {
    }

    var demo: any = new Demo();
    console.log(demo.value);
    demo.run();


4. 属性装饰器

    function fnDemo(value: string) {
        // clazz: 类原型对象
        // attr: 属性名
        return function (clazz: any, attr: any) {
            clazz[attr] = value;
        }
    }

    class Demo {
        @fnDemo('hello') 
        value: string | undefined;
    }

    var demo: any = new Demo();
    console.log(demo.value);


5. 方法装饰器

    function fnDemo(value: string) {
        // clazz: 类原型对象
        // methodName: 方法名
        // desc: 方法描述
        return function (clazz: any, methodName: any, desc: any) {
            // ...
        }
    }


5. 方法参数装饰器

    function fnDemo(value: string) {
        // clazz: 类原型对象
        // methodName: 方法名
        // paramsIndex: 参数的索引位置(从0开始)
        return function (clazz: any, methodName: any, paramsIndex: any) {
            // ...
        }
    }


6. 装饰器的执行顺序

    属性装饰器 -> 方法装饰器 -> 方法参数装饰器2 -> 方法参数装饰器1 -> 类装饰器2 -> 类装饰器1
    
    注: 装饰器可以写多个, 如果有多个装饰器, 会先执行后面的