方法裝飾器

語法

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

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

方法裝飾器不同于屬性裝飾器的地方在于descriptor參數。 通過這個參數我們可以修改方法原本的實現，添加一些共用邏輯。 例如我們可以給一些方法添加打印輸入與輸出的能力：

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 {@loggeradd(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：

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

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

…arg 代表任意數量的參數：

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

這樣，稍后我們調用 add 方法時，這個新版本就得以執行了：

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

總結

以上是生活随笔為你收集整理的使用 TypeScript 自定义装饰器给类的方法增添监听器 Listener的全部內容，希望文章能夠幫你解決所遇到的問題。

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