TypeScript基礎入門之裝飾器(二)

轉發 TypeScript基礎入門之裝飾器(二)

裝飾器求值

如何應用裝飾器應用於類內的各類聲明的順序：

1. 對每一個實例成員應用參數裝飾器，後跟Method，Accessor或Property Decorators。
2. 對每一個靜態成員應用參數裝飾器，後跟Method，Accessor或Property Decorators。
3. 參數裝飾器應用於構造函數。
4. 類裝飾器適用於該類。

類裝飾器

類裝飾器在類聲明以前聲明。
類裝飾器應用於類的構造函數，可用於觀察，修改或替換類定義。
類裝飾器不能在聲明文件中使用，也不能在任何其餘環境上下文中使用（例如在聲明類上）。

類裝飾器的表達式將在運行時做爲函數調用，裝飾類的構造函數做爲其惟一參數。

若是類裝飾器返回一個值，它將使用提供的構造函數替換類聲明。

>注意: 若是您選擇返回新的構造函數，則必須注意維護原始原型。在運行時應用裝飾器的邏輯不會爲您執行此操做。

如下是應用於Greeter類的類裝飾器（@sealed）的示例：

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

咱們能夠使用如下函數聲明定義@sealed裝飾器：

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

當執行@sealed時，它將密封構造函數及其原型。

接下來，咱們有一個如何覆蓋構造函數的示例。

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

@classDecorator
class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

console.log(new Greeter("world"));

方法裝飾器

方法裝飾器在方法聲明以前聲明。
裝飾器應用於方法的屬性描述符，可用於觀察，修改或替換方法定義。
方法裝飾器不能用於聲明文件，重載或任何其餘環境上下文（例如聲明類）中。

方法裝飾器的表達式將在運行時做爲函數調用，具備如下三個參數：

1. 靜態成員的類的構造函數，或實例成員的類的原型。
2. 會員的名字。
3. 會員的屬性描述

注意: 若是腳本目標小於ES5，則屬性描述符將不肯定。

若是方法裝飾器返回一個值，它將用做方法的屬性描述符。

注意: 若是腳本目標小於ES5，則忽略返回值。

如下是應用於Greeter類上的方法的方法裝飾器（@enumerable）的示例：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}

咱們能夠使用如下函數聲明定義@enumerable裝飾器：

function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

這裏的@enumerable(false)裝飾器是一個裝飾工廠。
當調用@enumerable(false)裝飾器時，它會修改屬性描述符的可枚舉屬性。

未完待續...