How to filter particular TypeScript errors in build result

Hi interwebz.
I just want to share this short poor man’s fix when migrating TypeScript to filter out some particular errors in TypeScript build.

Why the hell you (might) need it?

So what would be the common use case , why to bother mask/mute errors on build? Compile is the first test our code need to undergo, like first pass of “unit tests”.

Our situation : currently we have a lot of .js files that let’s say most of the time worked and we need to iterate on way to migrate fully from JavaScript only to TypeScript only. So we rename .js to .ts and then we ran into errors like (among others) :

  1. error TS2365 Operator ‘>=’ cannot be applied to types ‘string’ and ‘number’.
  2. error TS2365 Operator ‘==’ cannot be applied to types ‘string’ and ‘number’.
  3.  error TS2345 Argument of type ‘number’ is not assignable to parameter of type ‘string’.

Yes indeed these are against the “logic” of TypeScript – bring types to JavaScript. But I know I want it there for some short timespan. Just to test. I don’t want to wade through 1500 same errors I know I will have to fix, but among them TypeScript also tells me big and real problems, but buried under many same errors about types.

We are not alone in this, more ppl write about it here :
https://github.com/Microsoft/TypeScript/issues/6114

https://github.com/Microsoft/TypeScript/issues/4094

https://github.com/Microsoft/TypeScript/issues/9448

and also here https://github.com/Microsoft/TypeScript/issues/11051

Solution :

So the solutions vary from custom branch of TypeScript as such to stupid grep on the command line output. And since I am on Windows 10 (my dev box) , I chose to stick with PowerShell so this is snippet that should do the job.

Lets say we want to mute TS2365 and TS2345 errors and your TS build gulp task has name someTSBuildTaskName.

PS script – output to some file :

node .\node_modules\gulp\bin\gulp.js someTSBuildTaskName --color | Select-String -NotMatch "TS2365" | Select-String -NotMatch "TS2345" | Out-File "grepts.txt"

PS script – output just to console (just drop the last part after pipe) :

node .\node_modules\gulp\bin\gulp.js someTSBuildTaskName --color | Select-String -NotMatch "TS2365" | Select-String -NotMatch "TS2345"

PS: I am calling here the gulp task without gulp installed with -g flag (global) so you can just call

gulp someTSBuildTaskName

with globally installed gulp and you are also good to go.

Found any better solution? Pls let us know in comments! 🙂

AD: you can also use this console log parser on Jenkins:

Regular Expression :

([\w\\\.]+)\((\d+),\d+\):\s+\w+\s+((?!TS2365|TS2345)\w+):\s+(.*)$

Mapping Script :

import hudson.plugins.warnings.parser.Warning

String fileName = matcher.group(1)
String line = matcher.group(2)
String category = matcher.group(3)
String message = matcher.group(4)

return new Warning(fileName, Integer.parseInt(line), "TS Error", category, message);

and plug this into your build pipeline.

Prečo Vám (možno) nejdú dáta v sieti operátora 4ka

Na Slovensku niekoľko dní späť potešil operátor 4ka svojich zákazníkov 1GB dátovým balíčkom zdarma. Super, poviete si. Vložíte SIM do telefónu, zapnete dáta a : nestane sa nič. Hľadáte problém.

A možno po pár minútach hľadania prídete na to, že váš mobil (teda min. ten môj s Androidom rady 4) nepozná operátora 4ka a teda nemá ani default nastavenia internetu.

Takže chtiac nechtiac, musíte vytvoriť nové. V podstate jediné čo potrebujete urobiť je, vytvoriť nový profil a nastaviť APN (access point name) na “internet” a profil pomenovať a uložiť a nastaviť ako aktívny. Návody ako na to nájdete tu :

http://www.fony.sk/clanky/10419-vyskusali-sme-4ku-problemom-mozu-byt-data-a-slabe-pokrytie

https://www.swan.sk/media/content/Ako_zistit_dostupnost_siete_a_nastavit_vlastne_zariadenie.pdf

http://mobilmania.azet.sk/clanok/106673/swan-ako-si-nastavit-mobilny-internet

Enjoy.

How to use NuGet packages even with PowerShell projects with Visual Studio 2015

Most of developers doesn’t use PowerShell on day to day basis, but Microsoft in Visual Studio 2015 made it 1rst class citizen by making PowerShell Tools for Visual Studio 2015 plugin optional on install. (Before that, we had just optional plugin for VS 2013 and VS2012 by same author).

More on this here : http://blogs.msdn.com/b/powershell/archive/2015/04/19/do-not-delete-publish-powershell-tools-for-visual-studio-now-available.aspx

and here

https://channel9.msdn.com/Shows/MsftPowerShell/Visual-Studio-2015-PowerShell-Tools-Overview

and would all be good, but there is still one downside and that is :

you can’t use NuGet packages in PowerShell projects in VS2015 (at least that is how stuff works on my machine). I am really not sure, if this “feature” was introduced with VS 2015 or with NuGet 3.x, but my project worked with VS 2013 + plugin for VS2013.

On my dev box I get error like this one when trying to right clicking References and Manage NuGet Packages…:

powershell nuget error menu

and like this one using Package Manager Console :

powershell nuget error console

The problem is, that it seems like NuGet doesn’t support .pssproj projects, so however your project contains packages.config it will be ignored and you will not be able to update packages. You will have track what you installed and reinstall same version, but you will not be able to update these. Which is quite shame.

There is currently no simple solution to this but you can do these workarounds :

Solution 1 :

If you have small number of packages, install them by hand from command line with help of command line NuGet.

  • download NuGet.exe from https://www.nuget.org/  ,
  • cd to directory where NuGet.exe is (or if you have NuGet.exe in your PATH, you don’t need to cd),
  •  nuget install package_name -o “path_to_packages_folder_or_folder_where_to_store_packages” – which will install latest version of package you want,
  • use the package

You can indeed make a shell script for this. With this solution, the shell script will hold the information about packages you need/want to have installed.

Solution 2 :

If for some reason you want to preserve packages.config file, than you will have to manually update latest versions of packages it contains (since update is not working). Then this file will bear the information about what packages NuGet will install/restore. If this is your way to go, you can follow these steps :

  • download NuGet.exe from https://www.nuget.org/  ,
  • cd to directory where NuGet.exe is (or if you have NuGet.exe in your PATH, you don’t need to cd),
  • update the packages.config file with latest version numbers from https://www.nuget.org/  ,
  • nuget install “path_to_packages.config\packages.config” -o “path_to_packages_folder_or_folder_where_to_store_packages”,
  • use the package

All these solutions are for for scenarios where you need NuGet packages in Packages folder (inside solution folder).

But what there is another way, if you can install chocolatey on you dev box and if you can find in chocolatey repository the package you need.

Then you can do this :

Solution 3 :

  • install Chocolatey from https://chocolatey.org/,
  • run “choco install package_name” (choco should also make sure your new tool will be in PATH),
  • use the package

I would suggest you will make a shell script and automate install of your packages. Again, the file that will hold the information about packages is the shell script.

And if you ask, what is the reason for all this, what NuGet package you might want to use in PowerShell project, my answer is : https://github.com/pester/Pester

Hope this helps,

Dušan

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.