javascript - La propiedad ''valor'' no existe en el valor de tipo ''HTMLElement''
htmlelement typescript (7)
El problema está aquí:
document.getElementById(elementId).value
Sabe que HTMLElement devuelto por getElementById() es en realidad una instancia de HTMLInputElement hereda de él porque está pasando una ID de elemento de entrada. Del mismo modo en Java estáticamente estátizado esto no se compilará:
public Object foo() {
return 42;
}
foo().signum();
signum() es un método de Integer , pero el compilador solo conoce el tipo estático de foo() , que es Object . Y Object no tiene un método signum() .
Pero el compilador no puede saber eso, solo puede basarse en tipos estáticos, no en el comportamiento dinámico de su código. Y, por lo que sabe el compilador, el tipo de expresión document.getElementById(elementId) no tiene propiedad de value . Solo los elementos de entrada tienen valor.
Para una verificación de referencia HTMLElement y HTMLInputElement en MDN. Supongo que Typescript es más o menos consecuente con estos.
Estoy jugando con texto mecanografiado y estoy tratando de crear un script que actualice un elemento p a medida que el texto se ingresa en un cuadro de entrada.
El html se ve de la siguiente manera:
<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>
Y el archivo 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);
}
Cuando compilo con tsc obtengo el siguiente "error":
/home/bjarkef/sandbox/greeter.ts(8,53): The property ''value'' does not exist on value of type ''HTMLElement''
Sin embargo, el compilador produce un archivo javascript, que funciona muy bien en Chrome.
¿Cómo puedo obtener este error? ¿Y cómo puedo solucionarlo?
Además, ¿dónde puedo buscar qué propiedades son válidas en un ''HTMLElement'' según mecanografiado?
Tenga en cuenta que soy muy nuevo en JavaScript y mecanografiado, por lo que podría estar perdiendo algo obvio. :)
Problema:
error La propiedad ''texto'' no existe en el tipo ''HTMLElement''
Solución: en typeScript necesitamos convertir document.getElementById() que devuelve tipo HTMLElement en < HTMLScriptElement >
Entonces podemos hacerlo siguiendo el camino para resolver el error como lo espera el typescript.js
Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;
Me funcionó ... espero que también te funcione.
Pruebe a convertir el elemento que desea actualizar a HTMLInputElement. Como se indica en las otras respuestas, debe indicarle al compilador que este es un tipo específico de HTMLElement:
var inputElement = <HTMLInputElement>document.getElementById(''greet'');
inputElement.value = greeter(inputValue);
Según la respuesta de Tomasz Nurkiewicz, el "problema" es que el texto mecanografiado es seguro. :) Entonces, document.getElementById() devuelve el tipo HTMLElement que no contiene una propiedad de value . HTMLInputElement embargo, el subtipo HTMLInputElement contiene la propiedad del value .
Entonces, una solución es lanzar el resultado de getElementById() a HTMLInputElement así:
var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;
<> es el operador de casting en mecanografiado. Consulte la pregunta TypeScript: casting HTMLElement .
El javascript resultante de la línea de arriba se ve así:
inputValue = (document.getElementById(elementId)).value;
es decir, que no contiene información de tipo.
Si está utilizando reaccionar, puede usar el operador as .
let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
También para cualquiera que utilice propiedades como Props o Refs sin su "DocgetId''s", puede:
("" as HTMLInputElement).value;
Donde las cotizaciones invertidas son su valor de utilería así que un ejemplo sería así:
var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
Una solución rápida para esto es usar [] para seleccionar el atributo.
function greet(elementId) {
var inputValue = document.getElementById(elementId)["value"];
if(inputValue.trim() == "") {
inputValue = "World";
}
document.getElementById("greet").innerText = greeter(inputValue);
}
Solo pruebo algunos métodos y descubro esta solución,
No sé cuál es el problema detrás de tu script original.
Como referencia, puede consultar la publicación de Tomasz Nurkiewicz.