The property ‘value’ does not exist on value of type ‘HTMLElement’

by

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.

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. get and set in TypeScript
  3. How to inject Document in service?
  4. How to exclude getter only properties from type in typescript
  5. In TypeScript, how to get the keys of an object type whose values are of a given type?
  6. Implementing a generic function with a conditional return type
  7. WARNING: sanitizing unsafe style value url
  8. How to define static property in TypeScript interface
  9. Declaring the type of ‘this’ in a typescript function?
  10. Using eslint with typescript – Unable to resolve path to module
  11. Angular no provider for NameService
  12. Typescript error: TS7053 Element implicitly has an ‘any’ type
  13. TypeScript interface implementing doesn’t check method parameters
  14. Is this behavior of “𝚊𝚗𝚢” a TypeScript Type System Bug?
  15. Class type check in TypeScript
  16. Typescript: Type of a property dependent on another property within the same object
  17. Get function parameter names and types in TypeScript
  18. Typescript: Why type alias satisfies a constraint but same interface doesn’t?
  19. Eliminate nevers to make union possible
  20. Union and Intersection of types
  21. TypeScript: Define a union type from an array of strings
  22. What is the “as syntax” pointed out by tslint?
  23. Typescript and spread operator?
  24. Angular 2 ngModel in child component updates parent component property
  25. Getting the return type of a function which uses generics
  26. Angular 2 loader on each http request
  27. Typescript: type narrowing not working for `in` when key is stored in a variable
  28. Run factory function on import in TypeScript?
  29. How do I decide whether @types/* goes into `dependencies` or `devDependencies`?
  30. Self-referencing return type for static methods in inheriting classes

Leave a Comment