Using typescript@next nightly package? Don’t rely on –save-dev to be up-to-date!

Just a small update for all you cutting edge TypeScript users.

If you are using typescript@next NPM package as showed here : http://blogs.msdn.com/b/typescript/archive/2015/07/27/introducing-typescript-nightlies.aspx you may run into the same issue as we did @ work.

If you would install TypeScript nightly as blog says like this (I modified the command, this will install typescript@next package locally and save dependency in devDependencies):

npm install typescript@next --save-dev

you would see something like this in your package.json (please note the date 20150818 suffix)

{
"devDependencies": {  "typescript": "^1.6.0-dev.20150818"  }
}

Which is OK, and also

npm update

will work, until TypeScript recently updated to version 1.7.0 which will update you to latest 1.6.0 verions, which is typescript@1.6.0-dev.20150825.

If you would delete the folder with TypeScript in node_modules and also entry in package.json and reinstall typescript@next package, then you would have this entry in package.json (if installed on 1.9.2015) :

{
"devDependencies": {  "typescript": "^1.7.0-dev.20150901"  }
}

which will again work until TS updated to 1.8.0. You can try to npm update with this file, you will be updated to latest 1.7.0.

So, what can we do about this? You might try this small “hack” :

{
"devDependencies": {  "typescript": "next"  }
}

Happy npm update-ing 😉

Best @Model.Your.IT.Job.Title Reactions GIF blogs

If you from time to time would like to send after failed deploy2prod or wasted day full of prototyping some funny IT/dev/DevOps/UX/WhateverWillComeNextOps GIF to cheer up your colleagues, you might perhaps use one of these sites below :

http://itreactions.tumblr.com/

http://testerreactions.tumblr.com/

http://coderreactions.tumblr.com/

http://dbareactions.com/

http://frontenddevreactions.tumblr.com/

http://devopsreactions.tumblr.com/

http://uxreactions.com/

 

Bonus :

http://www.hongkiat.com/blog/things-programmers-say/

http://www.sharenator.com/Developer_s_Reaction_Gifs/

http://martinvalasek.com/blog/pictures-from-a-developers-life

How to exclude some files from TypeScript build

If you are using TypeScript nightly (and only with TypeScript 1.6 up) you can use in your tsconfig.json new property exclude which will mostly be used for node_modules like this

(more on this here : http://blogs.msdn.com/b/typescript/archive/2015/07/27/introducing-typescript-nightlies.aspx)

:

{
   "compilerOptions": {
   "out": "../../built/local/tsc.js",
   "sourceMap": true
   },
   "exclude": [
      "node_modules"
   ]
}

More on exclude property here : https://github.com/Microsoft/TypeScript/issues/3043

How to disable building of TypeScript files in Visual Studio 2015

If you would like to disable building TypeScript files in your solution for some reason (you want different build workflow, you just work on .cs files and don’t touch .ts files), you had to search for some kind of ifs or comments out to the project file in previous version of Visual Studio.

The problem as such is not new and solution was requested for some time from TypeScript team.

After digging in some articles I found this not much hyped solution :
add node

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

to the first

<PropertyGroup>

element in .csproj file.

For me, it worked.

More on the problem here :
https://github.com/Microsoft/TypeScript/issues/2326
https://github.com/Microsoft/TypeScript/issues/2294

One small note : if you have an error in the .ts files and compilation is disabled, build will not fail in Visual Studio 2015. But you can still see all errors in Error list tab. And you will still have IntelliSense.

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.

How to get type of object in TypeScript, when using union types and type guards for multiple types of function parameter or variable

tl;dr

When checking for primitive types in TypeScript , typeof variable === “string” or typeof variable === “number” should do the job.

When checking for HTMLElement or HTMLDivElement type of objects, variable instanceof HTMLElement or variable instanceof HTMLDivElement type of check should be the right one.

Please note that this is somewhat simplified point of view. I was only using simple objects and elements from one page. If you will run into some specialties, please read this article : http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/ and write as much unit tests as possible for you scenario. There might be some scenario where using typeof and instanceof are simple not enough.

The whole story :

My beloved TypeScript 1.4 we got a while back came with a new lovely possibility of having parameters passed as object that might be of several different types. For example you can accept either string or array of strings, where if passed a plain string, you can split it and continue with array of strings or use directly passed array.

We can argue if this is a good and clean solution from architectural point of view, but if for whatever reason this will be a requirement how the function should work, than we can leverage two sweet features of TypeScript :

Both might be used also separately or with some plain var in your code (you can just define var that will be of types string | HTMLElement | number) but if used together, Type Guards are building on top of Union Types feature and giving you some sweet stuff.

So what you get is, that TypeScript now understands what are you doing, when you check for one of types that variable might be of and you can get IntelliSense for that type (I am little fast forwarding here to the function I want to show you but this is what I mean by that) :

param check intellisense

And here I am getting to the main point of this particle and that is : how can we check for HTML elements of any other object from the DOM world?

As you all know, getting the basic types in JavaScript if quite difficult if you run into edge cases or the type you check for might be also array or stuff like that. You can read great article like this one : http://stackoverflow.com/questions/332422/how-do-i-get-the-name-of-an-objects-type-in-javascript. There are many caveats. 🙁

typeof will do, for the most part :

But most of the time, for basic types we are OK with using typeof operator and comparing against “string” or “number” but what about HTMLElement or HTMLDivElement object in TypeScript? Do the exist in the vast and wild JavaScript world? Yes the do exist, but dependent on the browser age with different results. Another misleading thing is that unfortunately the typeof operator will not work we want for HTMLElement and similar types of objects, but neither will the approach create an error, because every time we would get string “object” which is OK from inheritance point of view but its not what we need.

instanceof to the rescue :

What will work here is instanceof operator.  Nice article also here : http://stackoverflow.com/questions/7313559/what-is-the-instanceof-operator-used-for. Again, there are some caveats here (like this http://stackoverflow.com/questions/472418/why-is-4-not-an-instance-of-number) when used with primitive types like string, so I advice you to stick with instanceof for instances of objects or for checking of types from the DOM side of the world.

The snippet :

And here it is ladies and gentleman, the glamorous sample snippet I wanted to share with you (for testing purposes):

export function parCheckDemo(param: string | number | HTMLElement | HTMLImageElement | HTMLDivElement): void {
    if (param instanceof HTMLDivElement) {
        console.log('HTMLDivElement');
    } else if (param instanceof HTMLImageElement) {
        console.log('HTMLImageElement');
    } else if (param instanceof HTMLElement) {
        console.log('HTMLElement');
    } else if (typeof param === "string") {
        console.log('string');
    } else if (typeof param === "number") {
        console.log('number');
    } else {
        console.log("You're not supposed to be here! - Levelord");
    }
}

Hope this helps dear reader, enjoy. If you have any suggestions to the code, please feel free to share in the comments.

PS: yes, in real life I (and you too) should probably first check if anyone passed something as param argument , this snippet is jut for demo purposes.

Microsoft.Web.Infrastructure was not found while building on CI server

tl;dr story:
Just add HintPath node to Microsoft.Web.Infrastructure Reference node that points to where NuGet package is.

The full story:
I just would like to share with you problem I ran into. Basically we have a ASP.NET project that I updated with some NuGet packages. One of these packages installed as dependency Microsoft.Web.Infrastructure library. As usually, everything worked on my machine (dev box with VS 2013 and all other goods).

But the build failed on our CI server. With error like this (since we run German language mutation of Windows server, msbuild.exe was also in German) :
console build error

So, I checked if the package is installed correctly and it was :

mswebinfa package installed

Folder in packages subfolder was present :

mswebinfa subfolder in packages

I looked where the reference is pointing to and it was strange :

mswebinfa wrong path

it should point to packages folder like this :

antlr path in packages

OK, time to check the .csproj file.

Antlr reference looked like this :

antlr csproj reference

however Microsoft.Web.Infrastructure entry was missing the HintPath node, so I fixed it like this :

infrastructure fixed csproj reference

and after loading full solution, stuff started to work again :

mswebinfa correct path

and here we can see happy msbuild.exe in its natural habitat :

console build happy

Hope this helps.

BTW similar (but different) problem was solved here : http://stackoverflow.com/questions/13149851/could-not-load-file-or-assembly-microsoft-web-infrastructure

How to force types in Array with TypeScript’s union types

From TypeScript 1.4 we can do nice stuff with types now, with help of feature called Union Types : https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#union-types which will let you do also this sweet stuff :

ts union types

You can see this in action on this link :

http://www.typescriptlang.org/Playground

Sample snippet here :

module ArrPlayground {
    export function fn() {
        var arr: Array<boolean|string> = [];
        arr[0] = "aaa";
        arr[1] = false;
        arr[2] = 987;

        return arr;
    }
}

Basically you can now limit types that could be used in Array (all only at compile time, same rules apply as for other type checking features of TypeScript).

Enjoy.

Adding .JS file generated by TypeScript in Visual Studio 2013 to markup

Note to self :

If you want to add .js file generated by TypeScript from .ts file under Visual Studio 2013, you don’t need to click Show All Files, than search for file you wanted to add and then disable Show All Files (because by default, .js and map files are not part of project). You can just drag and drop .ts file to .html or .aspx markup and Visual Studio 2013 is intelligent enough to include .js file. Fast, simple, obvious. Not for all however 🙂 .