TypeScript基礎入門之裝飾器(一)
摘要：
介紹
隨著TypeScript和ES6中Classes的引入，現在存在某些場景需要額外的功能來支援註釋或修改類和類成員。
裝飾器提供了一種為類宣告和成員添加註釋和超程式設計語法的方法。
裝飾器是JavaScript的第2階段提案，可作為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