TDD in typescript

TDD in typescript

Looks like its not seamless: http://visualstudiomagazine.com/articles/2013/06/01/test-driven-development-with-typescript.aspx

SEE: http://joeriks.com/2012/10/12/test-first-development-with-typescript-within-visual-studio/

http://stackoverflow.com/questions/16069416/dependency-injection-in-typescript

using QUnit: http://lordhanson.wordpress.com/2012/10/15/unit-testing-with-typescript-and-resharper/

Testing with Jasmine:

http://www.nuget.org/packages/jasmine.TypeScript.DefinitelyTyped/

http://blorkfish.wordpress.com/2012/10/06/typescript-unit-testing-with-visual-studio-2012-jasmine-backbone-sinon-require-and-testem-on-windows-7/

UNIT TESTING: http://stackoverflow.com/questions/12695934/unittesting-in-typescript

tsUnit – TypeScript Unit Testing Framework

NOTE: Add ref file for intellisense

Eg.

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

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

Advertisements

write angularJS code using typescript

 

BEST: http://www.slideshare.net/jeremylikness/dev-link-likness-angularjs-and-typescript

http://www.piotrwalat.net/using-typescript-with-angularjs-and-web-api/

http://stackoverflow.com/questions/17944419/angularjs-typescript-directive

http://onoffswitch.net/angular-typescript-architecture/

See TodoMVC example here
https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular

BEST: http://notebookheavy.com/2013/05/22/angularjs-and-typescript/

BEST: http://blog.docmunch.com/blog/2013/angularjs-typescript-a-rich-maintainable-front-end-webapp-plus-a-few-minor-headaches

http://coderjournal.com/2013/07/angularjs-and-typescript/

http://3×14159265.tumblr.com/post/58365600915/improve-client-side-development-with-typescript-and

 

GOTCHAS

  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:https://github.com/angular/angular.js/issues/1903 )

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

class Test{

foo = “EAC”;

constructor(){

var directive:any = {};

directive.restrict = this.foo;

}

}

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 : http://www.youtube.com/watch?v=WdtVn_8K17E 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{

$inject:string[]

}

This means you can do :

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