In TypeScript when checking for types at runtime, don’t use type HTMLTableDataCellElement but HTMLTableCellElement.

June 22, 2015

tl;dr

Type HTMLTableDataCellElement is not defined in Chrome and FireFox, this object is IE only. If you want to test at runtime for TD element in all latest browsers, use HTMLTableCellElement instead.

The whole story :

Today I ran into one subtle thing when checking for types at runtime (I made a small post about checks already here : https://rostacik.net/2015/05/27/how-to-get-type-of-object-in-typescript-when-using-union-types-and-type-guards-for-multiple-types-of-function-parameter-or-variable/). TypeScript by default gives you type hints from file that comes with it – lib.d.ts. So this row :

createElement(tagName: "td"): HTMLTableDataCellElement;

will tell TypeScript that calling this line :

var a = document.createElement("td")

will produce variable a of type HTMLTableDataCellElement.

Then logically this snippet should work fine (but its not):

if (a instanceof HTMLTableDataCellElement) {
    //a is here of type HTMLTableDataCellElement with all IntelliSense props as expected in VS
} else {

If you just want to have a type at compile time there is no need for worries (just IntelliSense in VS or any other editor). You are fine.

At runtime, this will fail because Chrome and FireFox don’t know what HTMLTableDataCellElement is. But they know HTMLTableCellElement : https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement.

Also it turns out that in lib.d.ts interface HTMLTableDataCellElement inherits HTMLTableCellElement so we are safe (I think at least, because HTMLTableDataCellElement isnt extending HTMLTableCellElement with anything) to say that we can define variables of type HTMLTableCellElement like this :

var res: HTMLTableCellElement = document.createElement("td")

and at runtime check for these like this :

object instanceof HTMLTableCellElement

and everything should work as expected.

From my point of view, I would personally drop HTMLTableDataCellElement definition. I find it misleading.

Please note I did this code with TypeScript 1.5 beta downloaded from here : http://blogs.msdn.com/b/typescript/archive/2015/04/30/announcing-typescript-1-5-beta.aspx.

Hope this helps.