Skip to main content

Posts

Showing posts from April, 2015

Converting a Large AngularJS Application to TypeScript Part 2

In part 1 I was able to take an Angular controller written in JavaScript and convert it to a TypeScript file while doing very little to change the code. In this post I am going to explore transitioning that same controller to actually use the features provided in TypeScript. This is how I left off my controller:
declare var angular: any; (function () { 'use strict'; var controller: any = function($scope){ ... } angular .module('app') .controller('controller', controller); controller.$inject = ["$scope"]; })();
While performing the translation from JavaScript to TypeScript, I would make sure at every step that the functionality I expected still worked, so if anything I did broke the system I would change it back and try again with another approach. Also if something seemed like it worked too easily, I would break it on purpose to make sure I wasn't getting a false result through browser caching a previously working fil…

Unit Test Builder Pattern

I was recently introduced to a pattern for setting up Unit Tests with test data that I really like. It is called the Builder Pattern. It abstracts away the setup of your test data so that if properties or structure of your test data changes, you can make that change in one place and it will update all tests that would have otherwise been broken. It also makes it more clear exactly what you are testing for because you take the specific variables in your test data out of the tests and into the builder, leaving behind the intent of the test.

Following the Arrange, Assert, Act layout for a Unit Test, the Builder Pattern helps you define what goes into the Arrange section, and makes that section more readable and adaptable to change. Lets look at an example of what some current unit tests might look like.

[Test] publicvoid TaxAmount_CountryEngland_Returns0() { var testData = new TestData() { Country = "England" }; var result = Target.GetTaxAmount(testData); Assert.AreEqua…

Converting a Large AngularJS Application to TypeScript Part 1

I work on a project that uses AngularJS heavily. Recently we wondered if using a preprocesser like CoffeeScript or TypeScript for our JavaScript would be beneficial. If our team is going to switch languages, we would need to be able to convert existing code over without much pain and we would have to find enough value in switching that it would be worth the conversion.

I had read an article that stated that because TypeScript is a SuperSet of JavaScript, you could convert a plain JavaScript file to TypeScript by changing the extension to .ts and not much else would need to change. I wanted to test out this claim, so I took a file that I was familiar with, an Angular Controller, and tried to convert it to TypeScript to see how much effort it would take and then try to figure out where we would benefit from using TypeScript.

This is what the controller JavaScript file looked like to start out with:
(function () { 'use strict'; angular .module('app') …