typescript 中的 getter 和 setter 的“計算屬性名稱”

Question

Javascript 具有語法

class C {
   get [prop]() { ... }
   set [prop](v) { ... }
}

用於獲取或設置任意屬性。

在 Typescript 中有什么方法可以做到這一點嗎？

Answer 1

您的示例代碼實際上並沒有做您想做的事情，即使在 JavaScript 中也是如此。 計算的屬性名稱通過評估表達式以得出屬性名稱來工作。 例如：

const computed = {
    ["foo".toUpperCase()]: "bar"
}
console.log(computed.FOO) // bar

除非prop已經是一個現有變量，否則將prop用作計算屬性只會失敗。 每個計算屬性將僅用作單個屬性，而不是所有可能的屬性。

---

我認為攔截 JavaScript （因此在 TypeScript 中）中所有屬性獲取和設置的唯一方法是使用Proxy 。 這是一種可能的實現：

class C {
    [k: string]: any;
    constructor() {
        return new Proxy<C>(this, {
            get(thiz, prop) {
                console.log(`getting ${String(prop)}`);
            },
            set(thiz, prop, v) {
                console.log(`setting ${String(prop)} to ${v}`);
                return true;             }
        });
    }
}

我們告訴 TypeScript class C的實例具有字符串索引簽名，因此它將接受任何屬性鍵（和any屬性值）。 然后， constructor()方法顯式返回一個Proxy ，這樣當您在其上調用new運算符時，您將獲得代理而不是默認的this 。

無論如何，代理實現了一個get處理程序和一個set處理程序，因此它攔截了所有屬性的所有獲取和設置。 屬性鍵名稱被傳遞到處理程序方法中，因此您實際上可以獲得您正在尋找的行為：

const c = new C();
c.foo; // getting foo
c.foo = "bar"; // setting foo to bar

注意：我建議您在生產環境中使用之前小心並測試上述任何代碼； 在 class 構造函數或顯示的特定Proxy處理程序中返回自定義對象可能會涉及邊緣情況。

Playground 代碼鏈接