How to get the value of time element in Typescript?

Question

I have a time input element in HTML and I want its value as a number in Typescript. In Javascript we can do that by var time = document.getElementById("time").valueAsNumber;

But in Typescript it is throwing an error that Property 'valueAsNumber' does not exist on type 'HTMLTimeElement' after I wrote this code,

var time = <HTMLTimeElement>document.getElementById("time").valueAsNumber;

What do I do?

See this link: https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement — Majid M., Jun 11 '21 at 12:11

Oleg Valter is with Ukraine · Answer 1 · 2021-06-11T12:58:37.787

1

You made an incorrect assumption:

That <input type="time" /> translates to an HTMLTimeElement interface. The latter represents a special element with the tag <time> used in semantic markup containing machine-readable date & time as its value under the dateTime property (see the MDN reference).

What you needed instead was the HTMLInputElement interface which is shared by all <input> elements, the valueAsNumber will be present on the interface:

const { valueAsNumber } = <HTMLInputElement>(document.getElementById("time")); //OK, valueAsNumber is number

Playground

edited Jun 11 '21 at 12:58

answered Jun 11 '21 at 12:46

Oleg Valter is with Ukraine

9,619
8
37
59

@NisargKudgunti - NP :) `` is a more obscure tag so it's not unreasonable to expect that it might be the interface you are looking for with ``. The rule of thumb is that if you have an input, it will be a subtype of `HTMLInputElement` interface regardless of type. – Oleg Valter is with Ukraine Jun 11 '21 at 14:48

Parzh from Ukraine · Accepted Answer · 2021-06-11T15:20:36.223

Well, HTMLTimeElement values (for <time> tags) actually don't have valueAsNumber properties, you can believe TypeScript compiler on that. It seems like you really need to use HTMLInputElement interface (for <input type="time"> elements) instead:

var time = (<HTMLInputElement> document.getElementById("time")).valueAsNumber;

Another issue is that you have fallen to TypeScript's operator precendence trap: the property accessor operator (object.prop) has higher priority over type cast operator (<Type> value). Your expression therefore reads as this:

var time = <HTMLTimeElement> (document.getElementById("time").valueAsNumber);

… whereas you need this:

var time = (<HTMLTimeElement> document.getElementById("time")).valueAsNumber;

(See https://stackoverflow.com/a/28316948/4554883 for details.)

the OP fell in 2 traps, actually :) But you are right, with the `` assertion syntax one needs brackets when immediately accessing a property after asserting. — Oleg Valter is with Ukraine, Jun 11 '21 at 13:09

How to get the value of time element in Typescript?

2 Answers2