typescript 装饰器

类装饰器

function test() {
    return function(target: Function) {
        console.log(target);  // 打印出类A的构造函数
    }
}
@test()
class A {
    data = 1;
    constructor(val: any) {
        console.log('val',val);
    }
    func() {

    }
}
let temp = new A('dd');

目前暂时没想到类的构造函数的作用，可以做一些全局的东西，比如Egg.js的controller类加上装饰器可以实现不用写router，直接用controller的function名来定义URL
angular中用类装饰器主要用于参数添加和依赖注入

方法装饰器

function funcDec() {
    /**
    * @param target 被装饰方法所在类的prototype的值，比如 function a() {};a.prototype.func = function()   {},target就是a.prototype，所以可以给类追加方法
    * @param propertyKey 被修饰function的名称字符串
    * @param PropertyDescriptor 被修饰的方法的属性和值 configurable:true，enumerable:true，value:function () { … }，writable:true
    */
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(arguments)
        console.log('target');
        console.log(target.detail);
        console.log(propertyKey);
        console.log(descriptor);
        // 为被修饰的类追加 addfunc这个方法
        target.addfunc = function() {

        }
        if(propertyKey == 'detail') {
            // 装饰器这个中模式意图是无入侵式的修饰
            let originFunc = descriptor.value;
            descriptor.value = function(...param: any[]) {
                console.log('funcDec detail 1'); //①
                console.log(funcDec,(<any>this).name);//②
                originFunc.call(this,...param);//③
            }            
        }

    }
}
class func {
    name = 'zengwe';
    @funcDec()
    detail() {
        //④
        console.log(this.name)
        console.log(' detail origin func');
    }
    detail2() {
        console.log(this.name)
        console.log('origin func');        
    }
}
console.log(func)
let instance = new func();
console.log('excute function detail');
instance.detail();
console.log(instance);

执行结果

detail
func.ts:6
Object {value: , writable: true, enumerable: true, configurable: true}
func.ts:7
configurable:true
enumerable:true
value:function () { … }
writable:true
__proto__:Object {constructor: , __defineGetter__: , __defineSetter__: , …}
function func() { … }
func.ts:34
[[FunctionLocation]]:internal#location
[[Scopes]]:Scopes[2]
arguments:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
caller:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
length:0
name:"func"
prototype:Object {detail: , detail2: , addfunc: , …}
__proto__:function () { … }
excute function detail
func.ts:36
funcDec detail 1
func.ts:14
function funcDec() { … }
func.ts:15
[[FunctionLocation]]:internal#location
[[Scopes]]:Scopes[2]
arguments:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
caller:TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
length:0
name:"funcDec"
prototype:Object {constructor: }
__proto__:function () { … }
zengwe
func.ts:15
zengwe
func.ts:26
 detail origin func

instance.detail();执行时执行的顺序是①②③④
@funcDec() 其实在未new这个类时已经执行完了

访问器装饰器

就是getter setter的装饰器，和普通的方法装饰器一样

属性装饰器

function funcDec2() {
    return function(target: any, propertyKey: string) { // 只有两个参数
        console.log(arguments)
    }
}
class attr{
    @funcDec2()
    name = 'zengwe';
    constructor() {

    }
    func() {

    }
}

和方法参数好像差不多

参数装饰器

function required() {
    /**
    * @param target 和上面那写target一样的
    * @param propertyKey 修改的那个方法的参数（方法名称string）
    * @parameterIndex propertyKey方法的第几个参数
    */
    return function(target:any, propertyKey: string, parameterIndex: number) {
        console.log(arguments)
    }
}
function construct() {
    return function(target:any, propertyKey: string, parameterIndex: number) {
        console.log(arguments)
    }
}
class paramclass {
    constructor(@construct() dd: string) {

    }
    func(@required() name: string) {

    }
}

参数装饰器好像只能装饰普通方法的参数，构造函数并不能用参数修饰，要对构造函数搞事情就必须用到反射器了