Using TypeScript with Angular 1

TypeScript is the official language of Angular 2, but it is still too early to use Angular 2 in production for many reasons (the most important reason being that it is still in alpha). What if you want to use TypeScript now, right away, without having to wait for the arrival of the stable version of Angular? Well, it turns out that this is quite easy to achieve.

Price&Cost is currently looking for a Senior full-stack developer in Finland and Estonia to help deliver new exciting features to our growing customer base!

Learn more and apply!

If you are not sure why one would want to use TypeScript check out my previous article – Why you should use TypeScript for your next project.

Creating the sample app

First, we need to create a sample Angular project that we can turn into TypeScript. You can skip this part if you already have a project that you want to experiment with. We will do that by cloning the angular-seed repository made by the Angular team, since it is the easiest option.

You can check that everything is working by going to http://localhost:8000/app/index.html. Now we have a sample Angular that we can work with.

Adding TypeScript support

Now that we have our sample app, we need to install the TypeScript compiler and TypeScript definition manager if you don’t have them installed yet.

We are all set now. The only thing left to do is set up TypeScript compiler for watching our source files and compile them if anything changes. This is easily done by creating a tsconfig.json file in the root of our project:

This configuration tells the TypeScript compiler to output ES5 JavaScript code and to watch for changes in the current directory. You can now run tsc in the project root and see the following message by the TypeScript compiler:

Changing any TypeScript files will trigger compilation from now on.

Converting to TypeScript

We are now ready to write our first lines in TypeScript. Let’s convert some of the pre-existing Angular JavaScript code to TypeScript to test that everything is working fine. Rename the file app/view1/view1.js to view1.ts. We don’t even need to make any changes to the file at the moment since TypeScript is compatible with JavaScript. After TypeScript compilation a view1.js file will be automatically created (NB! At the moment of writing the TypeScript compiler sometimes fails to understand that something is changed when you rename files, thus no automatic compilation occurs. Just restart the tsc command to fix this). And this is basically it. We now have a project where TypeScript files are constantly compiled into JavaScript. The last thing that we can do here is to rewrite the view1.ts file using real TypeScript syntax to feel all the benefits of it. The initial file contents are as follows:

And the TypeScript version:

This is, of course, a very simple controller and it can be improved by making it into a class and then providing it to the Angular, but this is out of scope of this article.

Let us reiterate what we just achieved.

1. We created a simple Angular 1 application.
2. We installed TypeScript compiler (tsc) and definition manager (tsd).
3. TypeScript compilation happens automatically when files change.
4. View1Ctrl is now written using TypeScript.

You can now try making your own controllers and converting the remaining code into TypeScript. The complete source code for this article can be found here. Note that node dependencies are not included in the source, so you should run npm install to download them.