Property 'on' does not exist on type 'HTMLElement'.
snippet in html

Property 'value' does not exist on type 'HTMLElement'.


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 TypeScript: casting HTMLElement:

The resulting javascript from the line above looks like this:

inputValue = (document.getElementById(elementId)).value;
i.e. containing no type information.

Property 'on' does not exist on type 'HTMLElement'.


To prevent this error you can write:

var plotDiv: any = document.getElementById('myDiv');
plotDiv.on('plotly_relayout', ...
document.getElementById('myDiv') return HTMLElement. This type doesn't contain method
on because this method is added within plotly-latest.min.js. So in order to silence
the typescript warning you can explicity say compile not to check types for plotDiv

Another way is create type definition like:

interface PlotHTMLElement extends HTMLElement  {
  on(eventName: string, handler: Function): void;

var plotDiv  = <PlotHTMLElement>document.getElementById('myDiv')
plotDiv.on('plotly_relayout', function() {