[方法裝飾器](https://saul-mirone.github.io/zh-hans/a-complete-guide-to-typescript-decorator/)

# 語法

```typescript
type MethodDecorator = <t>(
  target: Object,
  propertyKey: string | symbol,
  descriptor: TypedPropertyDescriptor<t>
) => TypedPropertyDescriptor<t> | void;
```

(1)target: 對於靜態成員來說是類的構造器，對於例項成員來說是類的原型鏈。
(2)propertyKey: 屬性的名稱。
(3)descriptor: 屬性的描述器。

方法裝飾器不同於屬性裝飾器的地方在於descriptor引數。 透過這個引數我們可以修改方法原本的實現，新增一些共用邏輯。 例如我們可以給一些方法新增列印輸入與輸出的能力：

```typescript
function logger(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;

descriptor.value = function (...args) {
    console.log('params: ', ...args);
    const result = original.call(this, ...args);
    console.log('result: ', result);
    return result;
  }
}

class C {
  @logger
  add(x: number, y:number ) {
    return x + y;
  }
}

const c = new C();
c.add(1, 2);
// -> params: 1, 2
// -> result: 3
```

上面的例子，很像 Java 裡的 AOP - Aspect Oriented Programming, 面向切片程式設計。

執行時，我們裝飾器施加的 target：

![](https://img-blog.csdnimg.cn/img_convert/e08d9a2a9d4aaeaf70ff3022dd7f418f.png)

key 是被修飾的 add 方法的字串名稱：

![](https://img-blog.csdnimg.cn/img_convert/479b234f43ab64758c4819fb589ff955.png)

descriptor 的 value 屬性指向了 add 方法的原始實現：

![](https://img-blog.csdnimg.cn/img_convert/9faf024d77a3b05cc9047a2a77859d44.png)

...arg 代表任意數量的引數：

![](https://img-blog.csdnimg.cn/img_convert/a302b7f3a333df4a08d0a8323c592b3a.png)

第 57 行的 Object.defineProperty, 將類的 add 方法修改成包含了 log 功能的新版本：

![](https://img-blog.csdnimg.cn/img_convert/cba67fa4b3f189b8ecc8b40dbba06c1e.png)

這樣，稍後我們呼叫 add 方法時，這個新版本就得以執行了：

![](https://img-blog.csdnimg.cn/img_convert/c12f9145b6fe5a48f8b7e2ed518414e0.png)</t></t></t>

使用 TypeScript 自定義裝飾器給類的方法增添監聽器 Listener

相關文章