Typescript裝飾器如何用於html標簽？

Question

我很難理解如何使用Typescript decorators 。 我有以下代碼：

class Address {
    private street: string;
    private city: string;
    private state: string;
    private zipCode: string;

    @displayName("Street")
    get streetHtml() { return this.street; }

    @displayName("City")
    get cityHtml() { return this.city; }

    @displayName("State")
    get stateHtml()  { return this.state; }

    @displayName("Zip Code")
    get zipCodeHtml() { return this.zipCode; }

    public static map(input: any) {
        let address = new Address();

        address.street = input.street;
        address.city = input.city;
        address.state = input.state;
        address.zipCode = input.zipCode;

        return address;
    }
}

function displayName(name: string) {

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        let label: HTMLLabelElement = document.createElement('label');

        label.innerHTML = name;

        return label;
    };
}

var address = Address.map({ street: "123 My St", city: "Boise", state: "ID", zipCode: "83709" })

console.log(address.cityHtml);

但是，這唯一要做的就是返回“ Boise”。 我如何獲得裝飾物？ 我確實在tsconfig啟用了"experimentalDecorators": true 。

Answer 1

正如@JohnWhite所評論的那樣，類中的getter返回一個字符串（由編譯器從返回類型推斷出），但是您要求修飾器返回HTMLLabelElement 。
這可能會在編譯時給您帶來困難，或者最終導致運行時錯誤。

話雖如此，回答您的問題：
您在裝飾器中返回的不是訪問器的返回值，如文檔所述 ：

如果訪問器裝飾器返回一個值，它將用作該成員的屬性描述符

您需要做的是更改“屬性描述符”，以便它返回您想要的值：

function displayName(name: string) {
    return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
        descriptor.get = () => {
            let label: HTMLLabelElement = document.createElement('label');
            label.innerHTML = name;

            return label;
        }
    };
}

（ 操場上的代碼 ）

---

編輯

發布我的答案后，我注意到您希望獲得：

<label>Boise</label>

但是，您如何嘗試實現它（以及我的回答）返回：

<label>City</label>

為了獲得理想的結果，我們需要稍微更改一下代碼：

function displayName(name: string) {
    return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
        descriptor.get = function() {
            let label: HTMLLabelElement = document.createElement('label');
            label.innerHTML = this[name.toLowerCase()];

            return label;
        }
    };
}

（ 操場上的代碼 ）

更改內容在哪里：

1. 返回函數現在是一個普通的匿名函數，而不是一個箭頭的功能，使得this將指向類的實例，而不是窗戶。
2. 標簽內部html現在是this[name.toLowerCase()]而不是name