声明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

该类型位于TypeScript中的名称之后,部分原因是类型是可选的.

你的线路:

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

需要改为:

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

回到2013年,类型HTMLElement将从返回值推断出来getElementById,如果你没有使用严格的空值检查(但你应该在TypeScript中使用严格模式),情况仍然如此.如果要强制执行严格的空检查,则会发现返回类型getElementById已更改HTMLElement为HTMLElement | null.更改使类型更正确,因为您并不总是找到元素.

因此,在使用类型模式时,编译器会鼓励您使用类型断言来确保找到元素.像这样:

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

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

我已经包含了类型来演示运行代码时会发生什么.有趣的是,在语句中el具有较窄的类型,因为您消除了它为空的可能性.HTMLElementif

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

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

if (el) {
  const definitelyAnElement = el;
}

Answer 2

好的:奇怪的语法!

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();
};

Answer 3

在JavaScript中,您可以使用关键字var,let或function声明变量或函数.在TypeScript类中,您声明没有这些关键字的类成员或方法,后跟冒号以及该类成员的类型或接口.

它只是语法糖,没有区别:

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

和:

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

另一方面,因为您指定了类型,所以您将获得HTMLElement对象的所有信息.