Use Typescript with Angular 2

Spread the word

What is Typescript? It is a superset of Javascript with type information. You can define interfaces and types, such as string, boolean.

Why would you want to use Typescript? As of writing, decorators are still in a stage 1 proposal for the ES2016 specification. But thanks to transpilers like TypeScript and Babel projects can use them now to improve developer productivity.

The Typescript compiler is similar to bable transpiler which compiles code from ES6/7 to ES5 but adds typed information into the loop. There are informations about Typescript to write plugins that extend bable tools. This would require piping into other tools. I am guessing this is just a lot of work. But that is not the intention of this post.

Why use Typescript

For instance, if you use a new API you will have to look up the interface all the time. If you declare the interfaces in advance you will become much more precise in terms of development accuracy and catching errors before they appear.

A big advantage to using Angular 2 vs Angular 2 + Typescript is your transpilers ability to point out errors during compilation and not run-time. Angular 1 has made debugging a very exhausting undertaking. A typed language avoids some of the short comings Javascript has. Typescript demands some upfront work in order to use it for you and your team.

So why would you use it and what are the bullet points

  • Scalable frontend development
  • Easy to pick up for Java and C# developers
  • Interfaces make communication between developers easier
  • Interfaces make documentation better and readable
  • Build in modularity
  • Clean Javascript output

You can start with Typescript using their sandbox. Some of the early frustrations are normal and will go away once you get a grasp on interface.

Angular 2 started of to work with AddScript and later moved on to Typescript. Apparently decorators have been very enticing to use Typescript in order to add meta programming into the framework.

Typescript wants to be ahead of the standards. So the questions remains will it be possible to bring annotations and decorators to other projects, too?

Annotations are a way to add metadata to class declarations to do dependency injection or compilation directives. Decorators are simply functions that modify a class, property, method, or method parameter. The syntax is an “@” symbol followed by a function.

An annotation tells Angular, that the class, which the annotation is attached to, is a component. The annotation, gives Angular information about the view of the component. In this case, it’s an HTML template with “Hello World” as content.

TypeScript supports decorators, but doesn’t know about Angular 2 specific annotations. Which means that Angular 2 comes with metadata annotation implementations, which are then passed to the decorator generator to make decorators out of them. I am guessing that is a better choice from a maintenance point of view.

Let’s have a look at a specific example. MyComponent (above) class comes with two annotations, and . If we’d remove all annotations, what would be left is just an empty class which is an empty function? So it seems that Decorators/annotations have means to add metadata to a class to extend their purpose. It’s a declarative way to add metadata to code.

In the end, a class is just a function, which is also just an object, and all annotations end up as instance calls on the property of the class.

Here is the source.

Problems with Typescript

The problems that arise with Typescript is to use several versions of a framework. Definitions change and are referenced in both parts and become a problem due to old definitions.

Today, it actually correctly tells you which reference you are going to use. At least in WebStorm.

Package scoping which exists in Meteor is very comfortable and everything within that scope will not interfere with other packages. So if you start to integrate different packages that work with different Angular 2 versions, those packages should become able to reference the correct Typescript definitions based on their scope.

Do you need to use Typescript for Angular 2?

So what do you do when you use another authors Angular 2 packages and you only want to write in Javascript. This package will come along with its own definitions and will provide the component as you go.

Typescript will not become mandatory.

I am integrating Typescript for Ionic and Meteor projects and I feel very comfortable with it. I just like those features. The Typescript team is very supportive and the community is really active, too.

Here is a link to Typescript workshop I’d recommend.