Fehlervariablentyp zuweisen

Question

Ich fürchte, ich bin nicht sicher, ob dies eine Frage ist, über WebStorm, Angular2 oder Typoskript.

Ich habe eine Angular2 Build-Setup und bin mit WebStorm 2016.1.2 zu bearbeiten mit. Einer meiner Komponenten erhält einen Verweis auf ein DOM-Element ein einfaches document.getElementById('some-el'); und übergibt diese an einen Service-Methode:

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

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

Alles funktioniert gut und ich habe keine Fehler im Browser bekommen, aber ich habe einen Fehler in WebStorm zu el.querySelector("span"); verknüpfen

Der Fehler sagt: Initializer type Element is not assignable to variable type HTMLElement

ich weiß nicht, ein Problem mit WebStorm, wenn diese oder wenn ich die Eingabe tatsächlich etwas schief. Wenn ich den Typ span auf Element setze, verschwindet der Fehler, aber dann werden die offsetTop und offsetHeight als falsch markiert ??

Da der tatsächliche Build scheint nicht zu leiden, wenn ich es ausführen Ich frage mich nur, ob das ist etwas in meinem Code muss ich reparieren oder etwas in meinem Editor, dass ich ignorieren kann?

Beifall für Ihre Hilfe

Answer 1

Sie müssen es einfach nur werfen:

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

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

Oder Sie type assertion verwenden können:

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

Was passiert als Element und nicht HTMLElement ist, dass querySelector zurückkehrt Sie haben den Typ span zu sein. Aber Sie können dem Compiler sagen, "vertrauen Sie", dass Sie wissen, dass es in der Tat ein HTMLElement ist.

Sie können auch HTMLSpanElement anstelle des HTMLElement verwenden, die mehr spezifisch ist, wie HTMLElement ist spezifischer als Element (das ist, warum, wenn Sie es Element änderte sich die offsetTop und offsetHeight nicht verfügbar waren).