Angular (2+): To Typescript or To ES5?

…that is the question.

Aside from migrating angular 1.x code to angular 2 using few steps, i’ve been playing around with angular 2 (alpha and beta releases) lately. At first, it seemed strange and totally different from version 1.x. Version 1.x of angular is written in ES5, plain javascript, while version 2 is a new take with Typescript & ES 2015. In this post, i’de like to reflect my experience of writing with angular 2 with all of the language flavours — let it be ES5, ES2015 and Typescript.

I like ES5. I’m not a fan of strong typing and not sure where it is actually fits in the spirit of javascript.

I had to research and read lots of articles in order to understand what is going on in angular 2. I overviewed many code examples, I read some of the source code of angular 2.

Finally, I forked john’s papa repo of angular2go and started writing angular 2 code myself.

Getting Started With ES2015 (es6) syntax

First, I had to learn the new es2015 (es6) syntax.

The main new features that you’ll see in angular 2 are:

“import”

The “import” keyword is for requiring dependant modules (in commonjs or node.js’ “require” is used):

This is a welcomed feature with es2015, though it is not actually supported by browsers yet, so you’ll have to use 3rd party solutions such as browserify or webpack.

“destructuring”

That comes along with the import example above. Among many other features, it means that I can define the name of the variable as well as the object that I want to import from whatever package i’m importing from. In general, I can extract properties (let it be objects, functions and primitive values) from a simple json object.

I.e, in the above code, the “Component” is assigned (in this case) to a local variable “Component”, which I can use. You can see more examples this great resource.

“class”

One of the latest and most controversial keywords has been added to the ES 2015 spec. Essentially, its a syntactic sugar for defining a function with a prototype.

I think that the most important outcome is that in the end, we’re creating objects, and the “class” is no exception from this. It’s just a function that after it has been invoked, it will return an object with properties that were defined — let it be a primitive property or either a function property.

I.e, this “class”:

If translated to plain ES5, it could be a function with a prototype:

Since the final outcome is an object, The “Track” function can also be defined as a striped version with the revealing module pattern:

Understanding The Benefits Of Typescript In Angular2

The above ES5 code looks great and minimalistic to some. However, I think that the es2015 “class” does look great and minimalistic as well — it takes time to get used to (I admit…) but besides keeping it minimal, it also saved few key strokes and holds few gems with it.

I.e, default values for function arguments can be defined in the function signature:

This is an ES2015 feature.

Apart from supplying better tooling for coding with javascript, Typescript assists in several more scenarios with angular 2.

Injecting Services

In angular2, there are several methods to inject a service to a class. The easiest for injecting a singleton service is:

With this type annotation, you don’t have to instantiate the “playlist” service and you can be sure that the right object will be injected by the framework. This is what dependency injection is about with angular 2, and I suggest to read more about it on angular website.

Private Injected Services

With Angular 1.x, I usually tend to inject services and map its functions to a controller’s api scope. I.e (a simple code example):

The important fact to notice here is that this controller doesn’t expose the service “YoutubeSearch” to the view (scope or this), rather, it’s using it as a somewhat “private” variable through javascript closure feature.

With Typescript, you can declare this service to be available in MediaPlayer “context” as a property, so it will be accessible to this controller via the “this” context. With this definition, It will be available to the view as well. It’s important to note that if we omit the “private” (or “public”) definition, the “playlist” argument is only available inside the constructor function. I.e:

Final Thoughts

Choosing Typescript as the language of choice means using Ecmascript 2015 as well. Hence, all of the goodness of Ecmascript 2015 is available.

There are more benefits to using Typescript which I haven’t written about yet. Perhaps, some of them may be regarded as subjective preference — feature like Interfaces, Class Inheritance (ES 2015) etc. I hope to investigate these more in the future and trying to understand good use cases for it, regardless of assisting the development environment (or Code Editor) to help with better tooling and coding support like code completion.

It’s important to note that you don’t have to use Typescript or type annotation with angular 2, and you can stick to Ecmascript 2015 along with ES7 decorators only. However, I like to promote the ease of language use, readability and creative solution that may result in writing less code however, more expressive.

To summarise, I’m choosing to use Typescript wherever it may assist in writing less code while expressing more. I’ll probably tend to use the “good parts”.