[官網連結](https://saul-mirone.github.io/zh-hans/a-complete-guide-to-typescript-decorator/)

# 語法

```typescript
type PropertyDecorator =
  (target: Object, propertyKey: string | symbol) => void;
```
target：直接寫在類的屬性上？

看個例子：

```typescript 
function capitalizeFirstLetter(str: string) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function observable(target: any, key: string): any {
  // prop -> onPropChange
  const targetKey = "on" + capitalizeFirstLetter(key) + "Change";

target[targetKey] =
    function (fn: (prev: any, next: any) => void) {
      let prev = this[key];
      Reflect.defineProperty(this, key, {
        set(next) {
          fn(prev, next);
          prev = next;
        }
      })
    };
}

class C {
  @observable
  foo = -1;

@observable
  bar = "bar";
}

const c = new C();

c.onFooChange((prev, next) => console.log(`prev: ${prev}, next: ${next}`))
c.onBarChange((prev, next) => console.log(`prev: ${prev}, next: ${next}`))

c.foo = 100; // -> prev: -1, next: 100
c.foo = -3.14; // -> prev: 100, next: -3.14
c.bar = "baz"; // -> prev: bar, next: baz
c.bar = "sing"; // -> prev: baz, next: sing
```

編譯通不過：

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

一種解決辦法是，新增下圖這種 dummy 方法，這種方法不推薦，因為缺乏靈活性：

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

另一種方法較通用，即為類新增通用的所謂的 index signature：

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

語法如下：

[x:string]:any

意思是類 C 可以擁有任意的屬性，且屬性名稱為 string
![](https://img-blog.csdnimg.cn/img_convert/2c2038f950cbe85c4fd57a9e71d48412.png)

執行時，target 的型別為類 C 的建構函式：

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

key 為屬性名：

![](https://img-blog.csdnimg.cn/img_convert/c134b1c3002e610ac8fcf9f2d1ac4aa2.png)
在下圖第 15 行程式碼，直接給 C 的建構函式注入一個新的 on 監聽函式：

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

這個監聽函式的函式體，直到程式碼44行 onXXX 被呼叫時才會被執行：

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

給 C 物件例項的 foo 屬性使用 Reflect.defineProperty API 設定一個 set 方法。

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

這樣，每次該例項的 foo 屬性被修改時，就觸發其 set 函式：

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

在 set 函式實現體內，首先呼叫應用開發人員傳入的 回撥函式 fn，然後將 this[key] 設定為新的值 next.

執行時，c.foo = 100, 會導致 Reflect.defineProperty 註冊在 foo 屬性的 set 方法被觸發：

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

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

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

在 set 函式里，我們再也不能訪問到 C 例項的 foo 或者 bar 屬性，但是透過閉包，能訪問到其修改之前的原始值：
![](https://img-blog.csdnimg.cn/img_convert/cc63ace65282494962c1e310c5a3b661.png)

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

相關文章