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) {

}