TDD in typescript

TDD in typescript

Looks like its not seamless:


using QUnit:

Testing with Jasmine:


tsUnit – TypeScript Unit Testing Framework

NOTE: Add ref file for intellisense


/// <reference path=”node.d.ts” />

/// <reference path=”jasmine.d.ts” />

write angularJS code using typescript



See TodoMVC example here






  1. 1.       Use functions for your directive definitions. OR (The issue is not related to Typescript, but to AngularJS Directives. Changing templateUrl to templateand using inline code, helps to resolve the errors. It’s AngularJS Issue, more on that: )

This is because directives (unlike controllers) are called without the new operator. So if you have something like:

class Test{

foo = “EAC”;


var directive:any = {};

directive.restrict =;



It compiles to incorrect javascript. As the function Test is called without the new operator and that means that this refers to window and not an instance of the class. So you can’t use anything defined outside the constructor anyways. I recommend something like:

function foo():ng.IDirective{

return {

restrict: ‘EAC’;



This way typescript will help you write correct javascript for angular instead of point you in the wrong way.

  1. 2.       Use classes for your controller Controllers inside of directives are also called with the new operator. Same as controllers outside : Again let typescript help you with the meaning of this inside the controller definition. Plus you can use the type for the controller in the child directive something like (for typesafety and inference):

link: function (scope, iElement, iAttrs, simplrEditable:YourControllerClass)

For injection into directive functions I still use $inject. I have the following interface definition :

interface Function{



This means you can do :

foo.$inject = [‘$compile’]; // e.g