分配變量類型時出錯

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不可用的原因）。