Strongly-typed DOM access

[nycdotnet]

If I have a textarea element on my HTML page, the following JavaScript works:

var txt = document.getElementById("myElement").value

However to get this to work in TypeScript, I'm currently forced to use parentheses like this:

var txt = (<HTMLTextAreaElement>document.getElementById("myElement")).value

This is not only ugly, but the extra parentheses remain in the transpiled JS.

It'd be great if getElementById had a generic form in lib.d.ts such as:

getElementById<T>(elementId: string): T;

This would allow the much cleaner-looking TypeScript code that also doesn't affect the emit:

var txt = document.getElementById<HTMLTextAreaElement>("myElement").value

To be honest, though, even with this change, it'd be nice if there were a switch that would bypass property missing errors on HTMLElement. That would remove a significant amount of day-1 work for folks transitioning to TypeScript.

Perhaps something like making the non-generic getElementById return a HTMLGeneralizedElement which would extend HTMLElement and add common properties like value and checked as any. This would cover the scenario "I want to try TypeScript for my currently-working web page, but not resolve dozens of non-errors first", but not impact those who want to strongly-type everything (they'd just use the generic version).

[mhegazy]

I would say the ideal solution here, is if you had a some "tool" that would inspect your .html files, and generate a .d.ts file to match them, so in your case, you would generate an overload to Document:

interface Document {
    getElementById(elementId: "myElement"): HTMLTextAreaElement;
}

now for your use case, i do not see any issue with defining your additional overload:

interface Document {
    getElementById<T>(elementId: string): T;
    getElementById(elementId: string): HTMLElement; // general
}

[saschanaz]

You may want a type provider feature suggested by #3136.

[nycdotnet]

Mohamed - would you be willing to take a PR for generic versions of the document. functions? Perhaps if T extended HTMLElement?

@saschanaz I think a Type Provider is precisely what is required. A more formalized mechanism to implement Mohamed's tool idea within the context of the language.

[nycdotnet]

I wrote a little spike to inventory HTML files:

https://github.com/nycdotnet/html-to-ts-definition/

I suppose this would be a good way to achieve the automatic strongly-typed functionality.

I will submit a PR for the generic document.getElementById.

I'll close this in favor of #3136.