官網(wǎng)鏈接

語法

type PropertyDecorator =(target: Object, propertyKey: string | symbol) => void;

target：直接寫在類的屬性上？

看個例子：

function capitalizeFirstLetter(str: string) {return str.charAt(0).toUpperCase() + str.slice(1); }function observable(target: any, key: string): any {// prop -> onPropChangeconst 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 {@observablefoo = -1;@observablebar = "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

編譯通不過：

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

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

語法如下：

意思是類 C 可以擁有任意的屬性，且屬性名稱為 string

運行時，target 的類型為類 C 的構(gòu)造函數(shù)：

key 為屬性名：

在下圖第 15 行代碼，直接給 C 的構(gòu)造函數(shù)注入一個新的 on 監(jiān)聽函數(shù)：

這個監(jiān)聽函數(shù)的函數(shù)體，直到代碼44行 onXXX 被調(diào)用時才會被執(zhí)行：

給 C 對象實例的 foo 屬性使用 Reflect.defineProperty API 設(shè)置一個 set 方法。

這樣，每次該實例的 foo 屬性被修改時，就觸發(fā)其 set 函數(shù)：

在 set 函數(shù)實現(xiàn)體內(nèi)，首先調(diào)用應(yīng)用開發(fā)人員傳入的 回調(diào)函數(shù) fn，然后將 this[key] 設(shè)置為新的值 next.

運行時，c.foo = 100, 會導(dǎo)致 Reflect.defineProperty 注冊在 foo 屬性的 set 方法被觸發(fā)：

在 set 函數(shù)里，我們再也不能訪問到 C 實例的 foo 或者 bar 屬性，但是通過閉包，能訪問到其修改之前的原始值：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。