typescript - 使用 Typescript 操作 DOM

Question

我正在尝试构建一个具有递增、递减和重置功能的基本计数器应用程序；但是，我的 TS 代码有一些问题。我遇到的问题既不是 querySelector 也不是 getElementByID 识别我的 HTML DOM 元素。

在下面的代码中，我专门将我的元素转换为“HTMLElements”，但它对我的代码没有多大作用。

class Counter {
constructor(protected counterValue: number, protected hadErrored: boolean, protected errorMessage: string) {
    console.log("CONSTRUCTOR CALLED!");
}

getCounterValue() {
    return this.counterValue;
}

incrementCounter () {
        this.counterValue += 1;
        this.hadErrored = false;
        return this.counterValue;
    }

    decrementCounter () {
        if (this.counterValue <= 0) {
            this.hadErrored = true;
            return this.errorMessage;
        } else {
            this.counterValue -= 1;
            return "Decreased counter value: " + this.counterValue;
        }
    }

    resetCounter() {
        this.counterValue = 0;
        this.hadErrored = false;
    }
}

class DOMManipulation extends Counter {
    constructor (private counter: HTMLBodyElement, private increment: HTMLButtonElement, private decrement: HTMLButtonElement, private reset: HTMLButtonElement) {
        super(0, false, "Counter can't be less than 0")
    }
}

const counter = new Counter(0, false, "Counter can't be less than 0");

const incrementButton = document.getElementById("#increment") as HTMLButtonElement;
const decrementButton = document.getElementById("#decrement") as HTMLButtonElement;
const resetButton = document.getElementById("#reset") as HTMLButtonElement;
const counterValue = document.getElementById("#counter") as HTMLDivElement;

console.log(incrementButton) // This is returning null
console.log(incrementButton instanceof HTMLButtonElement) // This is returning false

counterValue.innerText = counter.getCounterValue.toString(); // Uncaught TypeError: Cannot set properties of null (setting 'innerText')
incrementButton.addEventListener("click", counter.incrementCounter);
decrementButton.addEventListener("click", counter.decrementCounter);
resetButton.addEventListener("click", counter.resetCounter);

任何形式的帮助将不胜感激。

亲切的问候。

标签： typescriptdom