声明一个 HTMLElement 打字稿 [英] Declaring an HTMLElement Typescript

问题描述

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

HTMLElement

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

因此:

class Greeter {元素:HTMLElement；跨度:HTMLElement；timerToken:数字；构造函数(元素:HTMLElement){this.element = 元素;this.element.innerText += "时间是:";this.span = document.createElement('span');this.element.appendChild(this.span);this.span.innerText = new Date().toUTCString();}开始() {this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);}停止() {clearTimeout(this.timerToken);}}window.onload = () =>{HTMLElement el = document.getElementById('content');vargreeter = new Greeter(el);迎宾.start();};

我收到一个错误

<块引用>

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

知道为什么吗?我怀疑我遗漏了一些明显的东西.

解决方案

类型在 TypeScript 中后面，部分是因为类型是可选的.

所以你的台词:

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

需要更改为:

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

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

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

const el: HTMLElement |null = document.getElementById('content');如果 (el) {const 绝对AnElement: HTMLElement = el;}

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

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

const el = document.getElementById('content');如果 (el) {const 绝对AnElement = el;}

In the default TypeScript HTML app from visual studio, I added

HTMLElement 

to the first line of the window.onload event handler, thinking that I could provide a type for "el".

thus:

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

I get an error

Compile Error. See error list for details .../app.ts (25,17): Expected ';'

Any clue why? I suspect I am missing something obvious.

解决方案

The type comes after the name in TypeScript, partly because types are optional.

So your line:

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

Needs to change to:

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

Back in 2013, the type HTMLElement would have been inferred from the return value of getElementById, this is still the case if you aren't using strict null checks (but you ought to be using the strict modes in TypeScript). If you are enforcing strict null checks you will find the return type of getElementById has changed from HTMLElement to HTMLElement | null. The change makes the type more correct, because you don't always find an element.

So when using type mode, you will be encouraged by the compiler to use a type assertion to ensure you found an element. Like this:

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

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

I have included the types to demonstrate what happens when you run the code. The interesting bit is that el has the narrower type HTMLElement within the if statement, due to you eliminating the possibility of it being null.

You can do exactly the same thing, with the same resulting types, without any type annotations. They will be inferred by the compiler, thus saving all that extra typing:

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

if (el) {
  const definitelyAnElement = el;
}

这篇关于声明一个 HTMLElement 打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！