TypeScript 素描 - 装饰器

 

/*
装饰器 简单理解为C#中的Attribute
能够装饰到类、函数、讯问符、属性、参数上 语法 @xxx
装饰器实际上是一个函数 @xxx 就要有一个 function xxx
多个装饰器能够用来装饰一个声明, @f @g arg
或者在多行上
    @f
    @g
    x
这样的组合最后的结果将会是 f(g(x))
装饰器的执行顺序
一、参数装饰器,而后依次是方法装饰器,访问器装饰器,或属性装饰器应用到每一个实例成员。
二、参数装饰器,而后依次是方法装饰器,访问器装饰器,或属性装饰器应用到每一个静态成员。
三、参数装饰器应用到构造函数。
四、类装饰器应用到类。

装饰器目前是实验性的功能,可能在之后的某个版本就会移除.默认也是不开启装饰器功能的
咱们手动的到tsconfig中配置experimentalDecorators为true
*/


/**
 * 一个简单的方法装饰器 参数
        target 对于静态成员来讲是类的构造函数,对于实例成员是类的原型对象
        propertyKey 成员的名字  这里是method
        descriptor 成员的属性描述符
 若是方法装饰器返回一个值 ,它会被用做方法的塑形描述符
 */
function f() {  //当调用C类method方法时其执行顺序是
    console.log("f(): evaluated");   //-- 1
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");   //--4
    }
}

function g() {
    console.log("g(): evaluated");  //--2
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called"); //--3
    }
}

class C {
    @f()
    @g()
    method() { }  // --5
}


/*
类装饰器 参数
      constructor 构造函数
类装饰器在类声明以前被声明,若是返回一个值(新的构造函数) ,它会使用提供的构造函数来
替换类的声明
*/
function classDecorator(constructor: Function) { }

@classDecorator
class B {
    constructor(message: string) {

    }
}



/*
访问器装饰器
用来装饰Get; Set 须要注意的是装饰第一个访问器就能够了,它默认装饰Get Set
     target 对于静态成员来讲是类的构造函数,对于实例成员是类的原型对象
     propertyKey 成员的名字  这里是method
     descriptor 成员的属性描述符
若是访问器装饰器返回一个值,它会被用做方法的属性描述符。
*/
function Decorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
}
class D {
    private _x: number;

    @Decorator
    get x() { return this._x };

    set x(value: number) { this._x = value };
}


/*
属性装饰器 参数
    target 对于静态成员来讲是类的构造函数,对于实例成员是类的原型对象。
    propertyKey 成员的名字。
若是访问符装饰器返回一个值,它会被用做方法的属性描述符。
*/

/*
参数装饰器
    target 对于静态成员来讲是类的构造函数,对于实例成员是类的原型对象。
    propertyKey 成员的名字。
    parameterIndex 参数在函数参数列表中的索引。

参数装饰器只能用来监视一个方法的参数是否被传入,并不能拿到值,数装饰器的返回值会被忽略。
*/
function argDecorator(target: Object, propertykey: string | symbol, parameterIndex: number) {
    
}
function fun( @argDecorator name: string) {

}
相关文章
相关标签/搜索