451 Stimmen

Die Eigenschaft 'value' existiert nicht bei einem Wert vom Typ 'HTMLElement'.

Ich spiele gerade mit Typescript herum und versuche, ein Skript zu erstellen, das ein p-Element aktualisiert, wenn Text in ein Eingabefeld eingegeben wird.

Die Html-Datei sieht wie folgt aus:

<html>
    <head>
    </head>
    <body>
        <p id="greet"></p>
        <form>
            <input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
        </form>
    </body>
    <script src="greeter.js"></script>
</html>

Und die greeter.ts Datei:

function greeter(person)
{
    return "Hello, " + person;
}

function greet(elementId)
{
    var inputValue = document.getElementById(elementId).value;

    if (inputValue.trim() == "")
        inputValue = "World";

    document.getElementById("greet").innerText = greeter(inputValue);
}

Wenn ich kompiliere mit tsc Ich erhalte den folgenden "Fehler":

/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'

Der Compiler gibt jedoch eine Javascript-Datei aus, die in Chrome einwandfrei funktioniert.

Wie kommt es, dass ich diese Fehlermeldung erhalte? Und wie kann ich ihn beheben?

Wo kann ich außerdem nachschlagen, welche Eigenschaften für eine 'HTMLElement' nach dem Typoskript?

Bitte beachten Sie, ich bin sehr neu zu javascript und typescript, so könnte ich etwas offensichtlich übersehen :)

751voto

Bjarke Freund-Hansen Punkte 25882

Ausgehend von Tomasz Nurkiewiczs Antwort besteht das "Problem" darin, dass typescript textsicher ist :) Also ist die document.getElementById() gibt den Typ HTMLElement die keine value Eigentum. Der Subtyp HTMLInputElement enthält jedoch die value Eigentum.

Eine Lösung besteht also darin, das Ergebnis von getElementById() a HTMLInputElement wie diese:

var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

<> ist der Casting-Operator in Maschinenschrift. Siehe die Frage TypeScript: HTMLElement gießen .

Wenn Sie sich in einer .tsx Datei wird die obige Casting-Syntax einen Fehler auslösen. Sie sollten stattdessen diese Syntax verwenden:

(document.getElementById(elementId) as HTMLInputElement).value

Das resultierende Javascript aus der obigen Zeile sieht wie folgt aus:

inputValue = (document.getElementById(elementId)).value;

d.h. sie enthalten keine Typinformationen.

138voto

Michael Punkte 2455

Wenn Sie react verwenden, können Sie die as Betreiber.

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;

53voto

Leo Punkte 9091

Wir könnten behaupten.

const inputElement: HTMLInputElement = document.getElementById('greet')

Oder mit as -Syntax

const inputElement = document.getElementById('greet') as HTMLInputElement

Geben Sie

const inputValue = inputElement.value // now inferred to be string

50voto

woodysan Punkte 795

Versuchen Sie, das Element, das Sie aktualisieren möchten, in HTMLInputElement zu casten. Wie in den anderen Antworten erwähnt, müssen Sie dem Compiler mitteilen, dass es sich um einen bestimmten Typ von HTMLElement handelt:

var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);

28voto

inDream Punkte 1277

Eine schnelle Lösung für dieses Problem ist die Verwendung von [ ], um das Attribut auszuwählen.

function greet(elementId) {
    var inputValue = document.getElementById(elementId)["value"];
    if(inputValue.trim() == "") {
        inputValue = "World";
    }
    document.getElementById("greet").innerText = greeter(inputValue);
}

Ich habe nur wenige Methoden ausprobiert und diese Lösung gefunden,
Ich weiß nicht, was das Problem hinter Ihrem ursprünglichen Skript ist.

Als Referenz können Sie sich auf den Beitrag von Tomasz Nurkiewicz beziehen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X