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

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

介紹

隨着TypeScript和ES6中Classes的引入，如今存在某些場景須要額外的功能來支持註釋或修改類和類成員。
裝飾器提供了一種爲類聲明和成員添加註釋和元編程語法的方法。
裝飾器是JavaScript的第2階段提案，可做爲TypeScript的實驗性功能使用。

注意: 裝飾器是一種實驗性功能，可能在未來的版本中發生變化。

要爲裝飾器啓用實驗支持，必須在命令行或tsconfig.json中啓用experimentalDecorators編譯器選項：

命令行：

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

裝飾器

裝飾器是一種特殊的聲明，能夠附加到類聲明，方法，訪問器，屬性或參數。
裝飾器使用@expression形式，其中expression必須求值爲一個函數，該函數將在運行時調用有關裝飾聲明的信息。

例如，給定裝飾器@sealed，咱們能夠編寫```sealed```函數，以下所示：

function sealed(target) {
    // do something with 'target' ...
}

注意: 您能夠在下面的類裝飾器中看到更詳細的裝飾器示例。

裝飾器工廠

若是咱們想自定義裝飾器如何應用於聲明，咱們能夠編寫一個裝飾器工廠。
裝飾器工廠只是一個函數，它返回裝飾器在運行時調用的表達式。

咱們能夠用如下方式編寫裝飾工廠：

function color(value: string) { // this is the decorator factory
    return function (target) { // this is the decorator
        // do something with 'target' and 'value'...
    }
}

注意: 您能夠在下面的方法裝飾器中看到裝飾器工廠的更詳細示例。

裝飾器組成

能夠將多個裝飾器應用於聲明，如如下示例所示：

1. 單行：

@f @g x

2. 多行：

@f
@g
x

當多個裝飾器應用於單個聲明時，它們的評估相似於數學中的函數組合。
在該模型中，當組成函數f和g時，獲得的複合(f ∘ g)(x)等於f(g(x))。

所以，在TypeScript中評估單個聲明上的多個裝飾器時，將執行如下步驟：

1. 每一個裝飾器的表達式都是從上到下進行評估的。
2. 而後將結果從底部到頂部稱爲函數。

若是咱們要使用裝飾器工廠，咱們能夠經過如下示例觀察此評估順序：

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

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

class C {
    @f()
    @g()
    method() {}
}

運行後輸出到控制檯以下：

f(): evaluated
g(): evaluated
g(): called
f(): called

未完待續...