Blog: TypeScript

Aurelia JS: Implement a dialog service which renders Bootstrap UI dialogs

December 19, 2016, Software Development

I’m currently working on an SPA (single-page application) which uses the Aurelia JavaScript client framework and Bootstrap UI CSS framework. In the application I need to show various custom dialogs. This is why I implemented a reusable dialog service class which simplifies the creation of Bootstrap based dialogs. In this article I’d like to share and explain the code of this dialog service and the required helper classes. The sample code is written in TypeScript but it can easily be converted to ES6 JavaScript. Implement the dialog service and base classes First we need to implement the dialog service – […] Read more...

Tags: , , ,

JavaScript decorator to add pre- and post-logic to a Promise

March 6, 2016, Software Development

In this blog post, I’ll describe the simple concepts of JavaScript Promise decorators. They are a simple way to add logic which is run before and after the exection of a Promise (a.k.a. aspect-oriented programming). As soon as you see my two samples, you’ll get the idea… The first sample shows a Promise decorator function which shows and hides a loading screen (I use TypeScript typings to show the types of function arguments): function showLoadingScreen<T>(action: () => Promise<T>) { ShowLoadingScreen(); return action().finally(function () { HideLoadingScreen(); }); } The decorator can be used in the following way: function longRunningAction() { return […] Read more...

Tags: , , ,

Asynchronously loaded Unit Tests with Jasmine and RequireJS

March 1, 2016, Software Development

The following check list shows how to write JavaScript Jasmine Unit Tests where the tests are asynchronously loaded from AMD modules with RequireJS. Download the Jasmine source files and extract the lib directory into an empty folder. Download RequireJS and copy the require.js file into the lib directory. In the lib/jasmine/boot.js file, remove the env.execute(); call from the window.onload callback. Create a SpecRunner.html file in the directory root with the HTML content shown below. As you can see, the embedded script loads the defined Unit Test modules and manually calls the previously removed execute() method: <!DOCTYPE html> <html> <head> <meta […] Read more...

Tags: , , , , ,

Angular 2: Convert input values to the correct type with a TypeScript property decorator

February 24, 2016, (updated on March 1, 2016), 8 comments, Software Development

I recently played with Angular 2 and found an uncomfortable problem: Declaring an input property with a TypeScript type does not guarantee that the input value will always be of this type. This is because the Angular framework may update an input with a wrongly typed value and thus is able to “circumvent” the TypeScript type system. As a result, you may end up with strange and unexpected runtime errors. Let’s have a look at this simple Angular component: @Component({ selector: "my-component" }) export class MyComponent { @Input() enabled = true; showValue() { alert(typeof this.enabled); } } As shown in […] Read more...

Tags: , , , ,

JavaScript Promises: Tips, tricks and best practices

January 15, 2016, (updated on March 4, 2016), Software Development

JavaScript Promises are a very powerful tool to avoid the callback nesting hell. The following article describes some tips and tricks when working with Promises. For developers with C# async/await knowledge, I will also show the async/await representations. With TypeScript, you can use this async/await syntax today. Most modern browsers only support JavaScript ES5 which does not provide a native Promise implementation. This is why you need one of the 3rd party Promises frameworks. When choosing a framework, you should check that it follows the Promises/A+ specification or a polyfill. The samples in this article are implemented using the Q […] Read more...

Tags: , , ,

How to implement an enum with string values in TypeScript

I currently work an a single-page application (SPA), where we use TypeScript to access web services. In some places, the sent and received data structures use enums to describe the range of allowed values. I tried to use the enums from TypeScript to access the web services in a strongly typed way: export interface PersonDto { language: Language; } export enum Language { English, German, French, Itialian } When serializing a PersonDto instance to JSON, the language field is converted to a number and not a string as required by the web service API: var person = <PersonDto> { language: […] Read more...


Taking fear from the .NET/XAML guy: Implement single-page web applications with TypeScript and MVVM

November 24, 2014, Software Development

I recently had to implement a JavaScript single-page web application – after years of doing .NET and XAML development. From projects which I worked on some years in the past, my opinion about JavaScript was not very good: There was no good IDE support, refactorings are hard to perform and the code in bigger project always gets unmanageable due to the untyped nature of JavaScript… Continue reading at my company’s blog… Read more...

Tags: , , , ,

  Page 1 of 1