TypeScript 類裝飾器的一個例子和使用單步調試搞清楚其運作原理

​

類裝飾器的定義如下：

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的原創文章，盡在："汪子熙":