官方文檔

類裝飾器的定義如下：

type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

接收一個函數，返回一個新的函數。類裝飾器本身也是一個函數。

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

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

因此，類裝飾器適合用于繼承一個現有類并添加一些屬性和方法。
看一個例子：

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

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

AppModule 里啟動 AppComponent:

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

在 Angular library tslib.es6.js里的 __decorate 方法，能看到我們自己定義的裝飾器 toString：

被裝飾器修飾的目標類 class C：

裝飾器返回一個新的子類，擴展自基類，并且覆蓋了 toString 方法：

這個 tslib.es6.js, 在本地的 node_modules 文件夾里也能找到：

TypeScript decorator 沒有什么魔術，還是調用的 Object.defineProperty 這個原生方法：

調用之前：

調用之后，JSON 實現的 toString 方法出現在其原型鏈上：

更多Jerry的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的TypeScript 类装饰器的一个例子和使用单步调试搞清楚其运行原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。