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 :)

0voto

jfunk Punkte 4937

Das mag abgedroschen klingen, aber bei mir hat das funktioniert:

yarn add -D @types/web

Ich glaube, ich hatte eine veraltete Typdefinition.

0voto

ThaJay Punkte 1533

Mein ursprünglicher Code:

<ion-input
  type="number"
  value={{propertyValue}}
  (change)="propertyValue = $event.target.value"
></ion-input>

führt dazu, dass mein Editor den folgenden Fehler anzeigt:

Property 'value' does not exist on type 'EventTarget'. ngtsc(2339)

Leider ist der einzige Weg, den ich gefunden habe, um dies in der Vorlage zu lösen, die Verwendung von $any() .

Ich stimme dem zu répondre hierauf von touchmarine in dem er sich für die Verwendung eines Typschutz anstelle der Typbestätigung.

Ich möchte direkt verwenden value in meinem Rückruf. value wurde getippt als string | number was zwar richtig sein mag, aber this.propertyValue es number Ich kann sie also immer noch nicht direkt einstellen:

(property) Components.IonInput["value"]?: string | number

Verwendung von instanceof wie in der genannten Antwort mit number Fehler wie dieser:

TS2693: 'number' only refers to a type, but is being used as a value here.

Und mit Number Fehler wie dieser (beachten Sie das große N):

TS2322: Type 'Number' is not assignable to type 'number'.

Die Lösung

  • Das Gießen von Typen wird nicht empfohlen
  • wir brauchen einen Callback, da dies in der Vorlage nicht unterstützt wird
  • Der #id-Selektor ist heutzutage der bevorzugte Weg, um einen Wert von einem Element in Angular zu erhalten. Es bringt die Typisierung den meisten Weg dorthin.
  • instanceof funktioniert nicht für Primitive, also verwenden wir typeof

    <ion-input type="number" value={{propertyValue}}

    propertyValueInput

    (change)="setPropertyValue(propertyValueInput.value)"

    </ion-input>

    public setPropertyValue (value) { if (typeof value === 'number') {this.propertyValue = value} }

Endlich! Wir sind textsicher und fehlerfrei!

P.S. Dies hat den zusätzlichen Vorteil, dass die Benutzereingabe einfach ignoriert wird, wenn etwas anderes als eine Zahl eingegeben wird. Im Browser kann ich zum Beispiel genauso gut Buchstaben in das Eingabefeld eingeben.

mehr Informationen zum Nachschlagen: Warum gibt mir 'instanceof' in TypeScript die Fehlermeldung "'Foo' bezieht sich nur auf einen Typ, wird hier aber als Wert verwendet."?

-1voto

Alok Adhao Punkte 379

Problem:

error Die Eigenschaft 'text' existiert nicht beim Typ 'HTMLElement'.

Lösung: In typeScript müssen wir die document.getElementById() die den Typ HTMLElement en < HTMLScriptElement >

So können wir den Fehler wie erwartet durch folgende Methode beheben typescript.js

Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;

Bei mir hat es funktioniert. Ich hoffe, es funktioniert auch bei Ihnen.

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