How to handle async functions inside constructors in TypeScript

In this post we will discuss some options you have with calling async functions in constructor of your TypeScript classes.

So, first of all – why would you do this? Well, maybe you need some data from a web API to fill the object with data, or you need some input from user, or some API in code from a colleague is async. Reasons may vary, but the problem is still the same :
in TypeScript, you can’t have await statement in constructor, because constructor returns instance of object, not Promise<yourObjectType>. (All of this indeed is tied to current version of TypeScript 2.2. maybe in future with native async/await keywords in JS, things will change).

So, possible solutions depend on what happens in your async functions and if you need results from this call / calls at the time you return the object.

Solutions :

1. Try to avoid async stuff in constructor. As said earlier, constructor is a function, that should initiate the object in some way and return it immediately, not return a promise that has to be awaited. That is considered a bad practice and TypeScript doesn’t allow this. More on this problem here

So in some sense, need for async stuff in your constructor might be considered code smell, you are doing too much in constructor. Refactor your code.

2. If you want your async code to stay in constructor for some reason, do you need results from async calls? If not and you want to call them and let them just execute, you might consider calling async functions without await. In this way you will unfortunately be unable to receive (await) the result from these calls (values passed back via resolve).
Please note, that this might result in some non deterministic issues because of how JS handles async code and I really don’t recommend this. Also another downside is, that if you would wrap everything inside constructor with try, promises that would be rejected (analogy with throwing exception in async sense will be not caught but become unhandled exceptions).

Your constructor might then look like this :

class SomeClass1 {
  constructor() {
    getConfirmAsync("1 - 1");
    getConfirmAsync("1 - 2");
    getConfirmAsync("1 - 3");

Sample with try/catch block might look like this :

class SomeClass2 {
  constructor() {
   try {
   } catch (e) {

No awaits means that code will continue to run and your constructor will finish and hand over new instance of your class sooner than code triggered from constructor will finish its execution. Scary, right? Don’t do it!!!!

Another take on this same approach is to leave an async self executing function in constructor like this :

class SomeClass3 {
  constructor() {
    console.log("SomeClass3 - entry");
      (async () => {
        try {
          await delayAsync(3000);
          await delayAsync(1000);
          await delayAsync(2000);
        } catch (e) {
          console.log(`catch triggered with exception ${e}`);
      console.log("SomeClass3 - exit");

Again, object would return from constructor but it would still lack calls to all async functions but this time, with proper async function, await and try/catch will work. So if for some reason first function would throw, all the others will not be hit (you can try to change the first call from 3000 to 2999 and see the results). Again, this is not recommended!

3. Simple “factory” function :

This is a way you might potentially want to go because it’s the safest one. All calls will be awaited and instance of you class will be in the state it should be.
All logic from constructor would have to be removed and stored in function that will have the logic of preparing object to the right shape. But, it is OK to separate the logic of creation from class to different function/files that knows what to do to make the object “right”?
Also you might want for safety reasons to “hide” somehow the class itself to prevent from instantiation without the factory function.
This could be done by exporting (from module) only interface of the object and “factory” function and not the class itself. Downside is, that all functions that are called in “factory” function need to be also public because “factory” function is not inside the class itself, but it is a separate function.

//exporting interface so we can work with the object outside
export interface ISomeClass {
	stringPublic: string;
	numberPublic: number;
//not exported = not visible
class SomeClass implements ISomeClass {
	public stringPublic: string;
	public numberPublic: number;
	private somePrivateFn() {
		console.log("this is private fn");
export async function createSomeClassAsync(): Promise<SomeClass> {
	let res = new SomeClass();
	await delayAsync(1000);
	await getConfirmAsync("1");
	await delayAsync(3000);
	await getConfirmAsync("2");
	await delayAsync(2000);
	res.numberPublic = 1;
	res.stringPublic = "aa";
	// res.somePrivateFn(); since we are not inside function this would fail
	return res;

This is TS that has export and import statements, but in my examples on GitHub I have this implemented without export and import. I can make a sample for you that is using modules (like the one above) but I decides to cut complexity for my readers and not use any bundling tool like webpack or browserify (I recommend webpack over browserify but that is just a matter of taste).
5. You want to hook a browser event inside the constructor , like some ready event or some other that will trigger some async functions once it happened.

Your constructor might look like this :

function ready(fn) {
    if (document.readyState !== "loading") {
    } else {
        document.addEventListener("DOMContentLoaded", fn);

class SomeClass {
    constructor() {
        console.log("SomeClass5 - entry");
        ready(async () => {
            try {
                await delayAsync(3000);
                await delayAsync(1000);
                await delayAsync(2000);
            } catch (e) {
                console.log(`catch triggered with exception ${e}`);
        console.log("SomeClass5 - exit");

I am using a helper function from to avoid adding jQ to the project, but you get the point.

If my samples doesn’t make sense for you, please to to my GitHub repo, you can find all the code I made as examples can be found there : .

If  you have TypeScript installed as global npm package, just type


in the root. If you dont have TypeScript installed, you just need to do to install npm packages :

npm install

and run TypeScript compiler to build all .ts files :


Feel free to ask or discuss in the comments 🙂

Why folders keep reappearing in my Visual Studio 2015 (WebForms) project?


If you have in your project files you moved to different location or removed but your .csproj still points to lets say : removedFolder/removedSubfolder/removedFile.ts then it might happen VS will recreate folders where you point (in this case  removedFolder/removedSubfolder).
What triggers this I wasn’t able to isolate and verify reliably (VS builds? open solution? some timer?).

My VS 2015 version to compare with yours :

Microsoft Visual Studio Enterprise 2015
Version 14.0.25431.01 Update 3
Microsoft .NET Framework
Version 4.6.01586

I have quite some plugins installed, so maybe some plugin is causing this. I can dump list of all my plugins, if needed. Just mail me.

my setup and how I found out

This happened to me on project  I work on and was quite difficult one to troubleshoot. Project is a bigger WebForms solution with some TypeScript files (among other stuff). We reordered some folders and forgot to save changes to .csproj. Since files we moved are TypeScript files and switched from built in TypeScript tooling build to npm builds, no build time error occurred. Folders kept reappearing and it was difficult to find some pattern what caused it. npm TypeScript builds? Running tape + karma tests? Some other tools? SVN even? No clue. But after I excluded missing files, folders didn’t appeared anymore. So I made a test solution like this,

VS with missing files

and boom, folders re appeared 🙂

Hope this helps.

How to notify all people in channel or in team using Microsoft Teams

So you switched from Slack to Microsoft Teams (just to see what’s new, test what MS cooked for us, it’s free so why the hell not) and rest of the team said yes, we should stick with it for some time.

1 of the thing we ran into is (and you might as well) : when using Slack, you have notifications about new message in channel. I am running Microsoft Teams Version and I don’t have this kind of thing. That is confusing. Is that feature? Bug?

Doesn’t matter, will see in next release. For now, this is what did the job for us :

  1. Choose a team
  2. Click on the 3 dots having tooltip : “More options”
  3. View team
  4. Settings
  5. Feature settings

So if enabled (should be enabled by default) you can use handles @team and @channel to notify everyone about something that needs their attention.

Hope this helps 🙂

RE: Malá reakcia – k mojej prednáške o TypeScript v Žiline

Všimol som si dnes na Twitteri reakciu na moju prednášku. Konkrétne tu : 

Priznám sa bez mučenia, zamrzrela ma a zarazil som sa. Prečo? V podstate obsah reakcie nieje nič iné len kritika (čo je tiež samo o sebe OK), problém je že bola bez položenej otázky prečo som urobil čo som urobil v kóde a hlavne, kritika bez overenia si faktov. A tiež kritika s implikovaním niečoho, čo autor okamžite usudzuje o mne (neviem čo je DRY atď.). Takže som si dovolil napísať túto reply. Budem tvorcovi článku rovno tykať ako je v IT bežné, verím že môžem, hoci sme sa nikdy nevideli. Možno raz pri pive, teším sa.

S čím súhlasím :

  • môj kód je do istej miery crap a vo svojej podstate som ho takto nemal odprezentovať. shame on me. keď sa teraz pozerám na kód, rovno z prvej vidím chybu ktorá ma napadla keď som “sa pozrel lepšie a vyspatý” (if 0 sa v JS evaluuje na false – aj po nedávnom probléme v práci s jednou drobnosťou @ runtime.

Fixnuté zmeny sú už na githube.

  • kým nemusím použiť dependencies (tu is.js), načo ich používať, to je jasné. súhlasím. pointa bola že ukážem ako funguje “intellisense” z .d.ts per danú libku a ako veci spolu hrajú – import modulu v TS. v projekte na ktorom robím primárne túto knižnicu dosť používam. áno, nemusel by som. ale dáva mi výhodu pekného počtu checkov ktoré už za mňa niekto otestoval. koniec koncov, aj jQuery nemusím používať, ale môžem. preto existujú weby ako a je na nás, aby sme si povedali kedy áno a kedy nie – rýchlosť app vs moja pri developmente.
  • npm môže byť niekedy dole, ale to je vec ktorú vieš vyriešiť cez yarn (, cez vlastný npm server. to je vec, ktorú rieši x ľudí. preto by som nemal používať npm packages? žiadne? really? už kompilátor typescriptu je niečo čo musíš dať dole z npm. už on môže mať dependencies ktoré nevieš zmeniť. čo ak padnú, niekto ich removne? nebudeš používať nič z npm?
  • súhlasím, že test parametrov je opakujúci sa a mohol byť/mal byť v jednej funkcii.
  • súhlasím, že aj takéto sample projekty by mali byť kvalitné a neukazovať omladine bad practices, ale to by si potom mohol povedať, že som mal použiť interface, ten implementovať a použiť DI aby sa veci dali lepšie testovať. proste je to sample, chcel som niečo oddemovať a nikde netvrdím že môj sample je kompletný zo všetkých uhlov pohľadu. class je static a pre mnohých code smell, prečo ti nevadilo to? použil som mochu. niekto používa tape lebo mocha podľa ich pohľadu zavádza do kódu globálne premenné ako describe a it a to je v JS vcelku dosť bad practice.

S čím nesúhlasím :

  • nesúhlasím s posudzovaním ľudí spôsobom aký si to urobil. skús unavený písať kód a potom si ho pozri ráno. nebudeš spokojný, ver mi. sám so sebou. keby som použil rovnaký meter, tak ti môžem povedať, že sisi nevšimol/neuvažoval ani vo svojom kóde nad if (0)
  • nesúhlasím, že ušetrenie 1 riadku ktoré si navrhol je zlepšenie. podľa mňa nieje. každý vidí aj z môjho kódu, čo robí. keby si to celé nejak zredukoval na 1 riadok, alebo o 1/2 alebo výrazne zjednodušil if, poviem OK, tu by som OK nehovoril. ak tam vidíš speedup, tak ja nie. to je ako hádka či { patrí na začiatok riadku, alebo na koniec.
  • kopol sisi do TypeScriptu bez googlenia : Ked je uz ten TypeScript taky dobry, preco po urceni typu, musim aj tak tento typ overovat? Hmm…Na prednáške som hovoril, že TypeScript pomôže s typmi len za compile time. Nie za runtime. Takže preto ten check. Za runtime môžeš poslať do funkcie čo len chceš. Ak je JS ktorý bude konzumovať môj vygenerovaný kód mimo môjho projektu, neviem čo tam pôjde a správam sa defenzívne.

Pre všetky tieto dôvody som napísal ku samplom svoj mail. Kľudne si mohol napísať, rád by som vysvetlil. IMO tvoj blog je tak trochu diss.

Samozrejme shame on me za chyby v sample kóde ktoré sa nemuseli stať. Mrzí ma to, milé publikum.

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 :

and also here

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 :


Mapping Script :

import hudson.plugins.warnings.parser.Warning

String fileName =
String line =
String category =
String message =

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 :


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 :

and here

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  ,
  • 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  ,
  • 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  ,
  • 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,
  • 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 :

Hope this helps,


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 : 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 :


Bonus :