Menu
I am playing around with typescript and am trying to create a script that will update a p-element as text is inputted in a input box.
The html looks as following:
<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> And the greeter.ts file:
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); } When I compile with tsc I get the following "error":
/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'
However the compiler does output a javascript file, which works just fine in chrome.
How come I get this error? And how can I fix it?
Also, where can I look up which properties are valid on a 'HTMLElement' according to typescript?
Please note I am very new to javascript and typescript, so I might be missing something obvious. :)
950
The error "Property 'value' does not exist on type 'HTMLElement'" occurs when we try to access the value property on an element that has a type of HTMLElement . To solve the error, use a type assertion to type the element as HTMLInputElement before accessing the property. This is the index.
The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.
Based on Tomasz Nurkiewiczs answer, the "problem" is that typescript is typesafe. :) So the document.getElementById() returns the type HTMLElement which does not contain a value property. The subtype HTMLInputElement does however contain the value property.
So a solution is to cast the result of getElementById() to HTMLInputElement like this:
var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value; <> is the casting operator in typescript. See the question TypeScript: casting HTMLElement.
If you're in a .tsx file the casting syntax above will throw an error. You'll want to use this syntax instead:
(document.getElementById(elementId) as HTMLInputElement).value The resulting javascript from the line above looks like this:
inputValue = (document.getElementById(elementId)).value; i.e. containing no type information.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With