声明一个 HTMLElement 打字稿

Question

在 Visual Studio 的默认 TypeScript HTML 应用程序中，我添加了

HTMLElement 

到 window.onload 事件处理程序的第一行，认为我可以为“el”提供一个类型。

因此：

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    HTMLElement el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

我收到一个错误

编译错误。有关详细信息，请参阅错误列表 .../app.ts (25,17)： 预期';'

有什么线索吗？我怀疑我遗漏了一些明显的东西。

Answer 1

尝试像这样对 elementHTML 使用类型：

window.onload = () => {
    var el= <HTMLElement>document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

Answer 2

注意 const 声明是块范围的。

const el: HTMLElement | null = document.getElementById('content');

if (el) {
  const definitelyAnElement: HTMLElement = el;
}

因此，在 {} 之外无法访问 absoluteAnElement 的值。

（我会在上面发表评论，但显然我没有足够的声誉。）

Answer 3

类型在 TypeScript 中的名称之后，部分原因是类型是可选的。

所以你的台词：

HTMLElement el = document.getElementById('content');

需要改成：

const el: HTMLElement = document.getElementById('content');

早在 2013 年，HTMLElement 的类型就会从 getElementById 的返回值中推断出来，如果你没有使用严格的 null 检查，情况仍然如此（但你 应该在 TypeScript 中使用严格模式）。如果您执行严格的空检查，您会发现getElementById 的返回类型已从HTMLElement 更改为HTMLElement | null。更改使类型更正确，因为您并不总能找到元素。

所以当使用类型模式时，编译器会鼓励你使用类型断言来确保你找到了一个元素。像这样：

const el: HTMLElement | null = document.getElementById('content');

if (el) {
  const definitelyAnElement: HTMLElement = el;
}

我已经包含了这些类型来演示运行代码时会发生什么。有趣的是el 在if 语句中具有更窄的类型HTMLElement，因为您消除了它为空的可能性。

您可以使用相同的结果类型执行完全相同的操作，而无需任何类型注释。它们将由编译器推断，从而节省所有额外的输入：

const el = document.getElementById('content');

if (el) {
  const definitelyAnElement = el;
}

Answer 4

在 JavaScript 中，您使用关键字 var、let 或 function 来声明变量或函数。在 TypeScript 类中，您声明的类成员或方法不带这些关键字，后跟冒号和该类成员的类型或接口。

只是语法糖，没有区别：

var el: HTMLElement = document.getElementById('content');

和：

var el = document.getElementById('content');

另一方面，因为您指定了类型，所以您可以获得 HTMLElement 对象的所有信息。

Answer 5

好的：奇怪的语法！

var el: HTMLElement = document.getElementById('content');

解决了这个问题。我想知道为什么这个例子一开始没有这样做？

完整代码：

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el: HTMLElement = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};