Il “valore” della proprietà non esiste sul valore di tipo “HTMLElement”

Sto giocando con typescript e sto cercando di creare uno script che aggiorni un elemento p man mano che il testo viene immesso in una casella di input.

L’html ha il seguente aspetto:

    

E il file greeter.ts :

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

Quando compilo con tsc ottengo il seguente “errore”:

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

Tuttavia il compilatore emette un file javascript, che funziona bene in chrome.

Come mai ottengo questo errore? E come posso ripararlo?

Inoltre, dove posso cercare quali proprietà sono valide su un 'HTMLElement' base al typescript?

Si noti che sono molto nuovo per javascript e typescript, quindi potrei mancare qualcosa di ovvio. 🙂

In base alla risposta di Tomasz Nurkiewiczs, il “problema” è che il typescript è tipografico. 🙂 Quindi document.getElementById() restituisce il tipo HTMLElement che non contiene una proprietà value . Il sottotipo HTMLInputElement tuttavia contiene la proprietà value .

Quindi una soluzione è lanciare il risultato di getElementById() su HTMLInputElement questo modo:

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

<> è l’operatore di casting in typescript. Vedi la domanda TypeScript: casting HTMLElement .

Il javascript risultante dalla riga sopra appare così:

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

cioè non contiene informazioni sul tipo.

Prova a trasmettere l’elemento che desideri aggiornare a HTMLInputElement. Come indicato nelle altre risposte è necessario suggerire al compilatore che si tratta di un tipo specifico di HTMLElement:

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

Se stai usando reagisci puoi usare l’operatore as .

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

Il problema è qui:

 document.getElementById(elementId).value 

Sapete che HTMLElement restituito da getElementById() è in realtà un’istanza di HTMLInputElement eredita perché si passa un ID dell’elemento di input. Allo stesso modo in Java staticamente digitato questo non verrà compilato:

 public Object foo() { return 42; } foo().signum(); 

signum() è un metodo di Integer , ma il compilatore conosce solo il tipo statico di foo() , che è Object . E Object non ha un metodo signum() .

Ma il compilatore non può saperlo, può basarsi solo su tipi statici, non sul comportamento dinamico del tuo codice. E per quanto ne sa il compilatore, il tipo di espressione document.getElementById(elementId) non ha proprietà value . Solo gli elementi di input hanno valore.

Per un controllo di riferimento HTMLElement e HTMLInputElement in MDN. Immagino che Typescript sia più o meno coerente con questi.

Una soluzione rapida per questo è usare [] per selezionare l’attributo.

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

Provo solo alcuni metodi e scopro questa soluzione,
Non so qual è il problema dietro il tuo script originale.

Per riferimento è ansible fare riferimento al post di Tomasz Nurkiewicz.

Inoltre, per chiunque usi proprietà come Puntelli o Rif senza i “DocgetId”, puoi:

 ("" as HTMLInputElement).value; 

Dove le virgolette invertite è il valore dei tuoi oggetti di scena quindi un esempio sarebbe come questo:

 var val = (this.refs.newText as HTMLInputElement).value; alert("Saving this:" + val); 

Problema:

errore La proprietà “testo” non esiste sul tipo “HTMLElement”

Soluzione: in typeScript è necessario eseguire il cast document.getElementById() che restituisce il tipo HTMLElement in < HTMLScriptElement >

Quindi possiamo farlo seguendo il modo di risolvere l’errore come previsto da typescript.js

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

Ha funzionato per me .. spero che funzioni anche per te.