Blog: TypeScript

How to instantiate a generic type in TypeScript

August 1, 2017, Software Development

In C# we can define a generic type argument and instantiate this type at runtime: public class Factory { public T Create<T>() where T: new() { return new T(); } } var factory = new Factory(); var person = factory.Create<Person>(); But how would you write such a method in TypeScript? The main problem is, that the generic type argument T is not available at runtime because TypeScript generics are only used at compile time for type checking and removed in the transpiled JavaScript code. The best solution I came up with, is to pass the generic type as method argument […] Read more...

Tags:

Aurelia JS: Detect dirty checked properties during development

I am currently working on new single-page web application based on the Aurelia framework. To avoid performance problems, we want to completely avoid dirty checked properties and method calls. Bindings are dirty checked whenever the framework cannot use another mechanismn than regularly polling for changes. It is important to detect dirty checked properties as early as possible so that they can direcly be avoided and not too many depenencies have to be changed. I found a simple solution: Just intercept the dirty check subscription method and print the name of the dirty checked property name to the console. In your […] Read more...

Tags: , ,

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 April 11, 2017), 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...

Tags:

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