Skip to main content

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')
        .controller('controller', controller);
 
 controller.$inject = ["$scope"];
 
 function controller($scope){
  ...
 }
})();

After changing the file's extension to .ts, in Visual Studio, I was greeted with Errors. Despite the IDEs telling me that there were Errors, the TypeScript file was still able to be compiled into a JavaScript file by just saving the .ts file, and the application continued to work without any changes to the file. While it was true for this file that it compiled without changing anything, the Errors would be a problem for building the entire solution.

The first Error I had to deal with was the fact that TypeScript did not know what angular was. It needed to be defined for the compiler to not complain about an object being used without any reference. Online resources lead me to discover that the "correct" way to solve this problem is to reference a definition file at the top of your TypeScript file. This is treated like a C# import, telling the compiler about that object. However, because I am trying to first do as little as possible to convert this file, I searched for and was able to find another approach that allowed the compiler to recognize angular without the need to reference any external files.

This is one area where the fact that TypeScript allows typing to be optional really helps out. I was able to declare the angular object as type "any". TypeScript sees the "any" type and allows for anything to be called on it, or for it to have any properties. This is basically like telling TypeScript to treat the object as a normal JavaScript object, which provides a lot of flexibility, but doesn't give you the benefits that TypeScript offers. In this case, the flexibility is worth it and we end up with:
declare var angular: any;

(function () {
    'use strict';
 
 angular
        .module('app')
        .controller('controller', controller);
 
 controller.$inject = ["$scope"];
 
 function controller($scope){
  ...
 }
})();

Next Error is that TypeScript did not like the Angular $inject on the controller. Because the controller is not defined it treats it as a function, and functions don't have a $inject property. So I needed to similarly define the controller as an "any" object so that the compiler would stop complaining. This got rid of all of the Errors and we are left with this:
declare var angular: any;

(function () {
    'use strict';
 
 angular
        .module('app')
        .controller('controller', controller);
 
 controller.$inject = ["$scope"];
 
 var controller: any = function($scope){
  ...
 }
})();

Unfortunately, after making this change, the application no longer works and I got JavaScript errors thrown by the browser. It treated controller as undefined at the point where it tried to add it in the angular .controller initialization. Surprisingly to me at least, defining the controller as a variable that is a function after trying to use it fails. The solution is to move the declaration up so that it happens before the controller is referenced anywhere. Leaving us with:
declare var angular: any;

(function () {
    'use strict';
 
 var controller: any = function($scope){
  ...
 }
 
 angular
        .module('app')
        .controller('controller', controller);
 
 controller.$inject = ["$scope"];
})();

So in the end I had to make some changes, although they were very minor, to be able to get Visual Studio to compile without build Errors. With this conversion we don't get any real benefits from switching to TypeScript. Next up is to start digging into the features of TypeScript and find out how much value we can get from utilizing those features.

Comments

  1. Fabulous post on angularjs. Really helpful, keep up the good work and share more like this.
    Angularjs course in Chennai | Angularjs Training in Chennai

    ReplyDelete
  2. Really very nice blog information for this one and more technical skills are improve,i like that kind of post.

    Education
    Technology

    ReplyDelete
  3. More impressive blog!!! Thanks for shared with us.... waiting for you upcoming data.
    thanks for your information really good and very nice web design company in velachery

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Never knew I can clear my debts so quick after my encounter with hacker boss at https://flipwuboss.me contact them if you looking for quick cash, thank me later

    ReplyDelete
  7. Most individuals utilize short, easy to remember passwords. While seemingly harmless, simple and insecure passwords are one of the most common ways you can leave yourself susceptible to a cyberattack. Malware Analyst Career Overview

    ReplyDelete
  8. I loved the information given above, I appreciate the writing. Enhance your learning experience with our top-notch online home tuition classes for Class 11.
    For more info Contact us: +91-9654271931, +971-505593798 or visit online tutoring sites for class 11

    ReplyDelete

Post a Comment

Popular posts from this blog

Interns: Taking off the training wheels

My intern team has been working for several weeks now on our new website. We have already completed one deployment to production and are finalizing our second one. We started with a plan to release often adding small bits of functionality as we go and so far that plan has been working really well. We already feel like we have accomplished a lot because we have completed many of our project's requirements and should easily be able to complete the rest giving us time to do even more than just the original requirements. One of the things I have had some difficulty balancing has been how much to lead the interns and how much to let them figure out on their own. In deciding what our team process should be and how we should allocate our time, I think it was important for me to do more leading. I saw some deficiencies in how we were currently working and brought up some ideas for how we could address them. We had moved into spending all our time just working through stories and did not

My idea for Hearthstone to add more deck slots

Recently someone asked the Blizzard developers for more slots for decks in the game Hearthstone. The response was that they are talking about it and looking into it, but no decision has been made yet. One of the concerns over adding deck slots is that it could complicate the UI for Hearthstone and make it more difficult for new players to understand. I have what I think would be a good solution to add more deck slots without increasing the learning curve for the game much if at all. First I would take a look at the current selection screen for starting to play a game. It defaults to showing the decks that are custom built by the player if they have any custom decks, and there is an option to page over to the basic decks. This basic deck screen is perfect for how I would change this process. Instead of having 2 pages of decks, 1 for basic and 1 for custom, you would just see the select a Hero screen. Then once you selected the Hero you wanted, you would see all of the decks that