Monthly Archives: June 2015

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

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 : http://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.

How to make CKEditor load just like a frame but show upper command buttons when maximized to fullscreen

Here is my small take on what is needed in lots of apps that have limited real estate on the screen. To load some (in my case CKEditor) editor with hidden chrome, buttons that are either shared for several editors, or each editor has its own set, you name it. There are limitless possibilities of what your client would like to have/see/use.

My sample is loading CKEditor with hidden build in controls and using own buttons. Once in fullscreen the editor will fill the screen and we can also show controls.

Here is the sample repo :

https://github.com/rostacik/CKEditorPlayground

and here you can see directly the result :

https://rawgit.com/rostacik/CKEditorPlayground/master/CKEditorPlayground/index.html

Feel free to reuse, enjoy.