分配变量类型时出错

Question

恐怕我不确定这是否是有关WebStorm ， Angular2或Typescript的问题 。

我已经设置了Angular2构建，并且正在使用WebStorm 2016.1.2进行编辑。 我的组件之一使用简单的document.getElementById('some-el');来获取对DOM元素的引用document.getElementById('some-el'); 并将其传递给服务方法：

calc(el:HTMLElement){
    this.height = el.offsetHeight;
    this.width = el.offsetWidth;

    let span:HTMLElement = el.querySelector("span");
    this.pos = span.offsetTop - span.offsetHeight;
}

一切正常，在浏览器中没有任何错误，但在链接到el.querySelector("span");中却出现错误el.querySelector("span");

错误消息： Initializer type Element is not assignable to variable type HTMLElement

我不知道这是WebStorm的问题还是我键入的错误。 如果将span类型设置为Element则错误消失，但是offsetTop和offsetHeight会突出显示为不正确？

由于运行时实际构建似乎没有受到影响，我只是想知道这是我需要修复的代码中的内容还是编辑器中可以忽略的内容？

助您一臂之力

Answer 1

您只需要强制转换：

calc(el:HTMLElement){
    this.height = el.offsetHeight;
    this.width = el.offsetWidth;

    let span:HTMLElement = <HTMLElement> el.querySelector("span");
    this.pos = span.offsetTop - span.offsetHeight;
}

或者您可以使用类型断言 ：

let span:HTMLElement = el.querySelector("span") as HTMLElement;

发生的情况是，在您声明span类型querySelector ， querySelector返回Element而不是HTMLElement 。 但是您可以告诉编译器“信任您”，您知道它确实是HTMLElement 。

您也可以使用HTMLSpanElement而不是更具体的HTMLElement ，就像HTMLElement比Element更特定（这就是为什么将其更改为Element offsetTop和offsetHeight不可用的原因）。