[官方文件](https://saul-mirone.github.io/a-complete-guide-to-typescript-decorator/)

類裝飾器的定義如下：

```typescript
type ClassDecorator = <tfunction extends="" function="">
  (target: TFunction) => TFunction | void;
```
接收一個函式，返回一個新的函式。類裝飾器本身也是一個函式。

輸入引數 target：類的構造器。

返回引數：如果類裝飾器返回了一個值，她將會被用來代替原有的類構造器的宣告。

因此，類裝飾器適合用於繼承一個現有類並新增一些屬性和方法。
看一個例子：

```typescript
type Consturctor = { new (...args: any[]): any };

function toString<t extends="" consturctor="">(BaseClass: T) {
  return class extends BaseClass {
    toString() {
      return JSON.stringify(this);
    }
  };
}

@toString
class C {
  public foo = "foo";
  public num = 24;
}

console.log(new C().toString())
// -> {"foo":"foo","num":24}
```

執行時除錯入口：main.js

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

main.js 里載入應用開發的 AppModule，作為 bootstrapModule：

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

AppModule 裡啟動 AppComponent:

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

整個 class C 的定義，作為 toString 的輸入引數：

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

在 Angular library tslib.es6.js裡的 __decorate 方法，能看到我們自己定義的裝飾器 toString：
![](https://img-blog.csdnimg.cn/img_convert/9c943659f2f0642c0d720510fa92d9c7.png)

被裝飾器修飾的目標類 class C：
![](https://img-blog.csdnimg.cn/img_convert/6d2f2bfb14064167706282c6f3d78eed.png)

裝飾器返回一個新的子類，擴充套件自基類，並且覆蓋了 toString 方法：

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

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

這個 tslib.es6.js, 在本地的 node_modules 資料夾裡也能找到：

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

TypeScript decorator 沒有什麼魔術，還是呼叫的 Object.defineProperty 這個原生方法：

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

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

呼叫之前：

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

呼叫之後，JSON 實現的 toString 方法出現在其原型鏈上：
![](https://img-blog.csdnimg.cn/img_convert/ccb59d2f538d4d7ce7d23e439063b142.png)</t></tfunction>

TypeScript 類裝飾器的一個例子和使用單步除錯搞清楚其執行原理

相關文章