分配变量类型时出错

Question

恐怕我不确定这是关于 WebStorm、Angular2 还是 Typescript 的问题.

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

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");

的 WebStorm 中收到错误

错误说：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;
}

或者您可以使用 type assertion:

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

发生的是 querySelector returns Element 而不是 HTMLElement ，因为您声明 span 的类型。但是你可以告诉编译器 "trust you" 你知道它确实是一个 HTMLElement.

您也可以使用 HTMLSpanElement 而不是更具体的 HTMLElement ，就像 HTMLElement 比 Element 更具体（这就是为什么当您更改它时Element offsetTop 和 offsetHeight 不可用。

分配变量类型时出错

Error assigning variable type

webstorm

typescript

angular