We are all excited about Angular 2 is close enough to release its final version and we all know that it would be much much better than Angular 1.x. The most happiest thing that ever happened to me in Angular 2 is that it become more visible to SEO and mobile, Yay... Although Angular 2 is still Angular and the MVW (Model View Whatever) concepts and core philosophy remains the same, many changes made and new features such as components, directives, TypeScript, the new router and other few things were introduced.
Among those new features that we need to know before start using Angular 2 in our project, let's start browsing TypeScript, which is a superset of ECMAScript that the Angular core team decided to use in Angular 2, in this post.
Introduction to TypeScript
Images taken from https://angular2buch.de
Why should we use TypeScript?
This is where TypeScript came in. With the advantage of static typing, which takes care of code mistyping by a compiler, TypeScript will warn any type error in compile-time.
Moreover, type annotations, one of the built-in features of TypeScript, allows text editors and IDEs can perform better static analysis over our code. This means that we can increase our productivity by making fewer mistakes while writing the code with help of better refactoring tools and autocompletion.
Getting started with TypeScript
To get started with TypeScript, it is better having Node.js installed on your machine as many people recommend using Node Package Manager (npm) to install TypeScript. If you dont have Node.js, you can take a look instructions at Understanding and Installing Node.js and npm post.
Open Terminal and type the following command to install latest stable version of TypeScript using
$ npm install -g typescript
To verify your TypeScript installation, type the following command and it will show the version of TypeScript that you installed.
$ tsc –-version
The version may vary to yours and the latest stable version of TypeScript is
1.8.10 at time of writing this post.
Running TypeScript program
Let's start writing our first TypeScript program from command line.
Create a folder for our program and I will name that folder firstTypeScript. I used to create my web projects within folder named Sites under home directory in Mac OS X. In this case, my program will be located at
Then I will create a file called hello.ts with a content of
Open the Terminal and type
$ cd Sites/firstTypeScriptto get inside your program folder. The location may vary to yours. Then type
$ node hello.jsto run hello.js file with node. You will see the string Hello world! printed in the Terminal.
Alternative example using Command Lines
You can all above steps just only in Terminal. I was afraid of using Terminal and used to avoid using command lines in my early web development years. Later, I became to know that Command lines makes web development easy and fast. If you are not familiar with command lines, you should start using it too. So, let's create our first TypeScript program just from command lines.
I intend this command line example only for Beginners. If you have knowledge of using command lines, you can skip this example.
Type the following commands in OS X Terminal one by one in order to achieve same result as the above program produced.
mkdir firstTypeScript touch hello.ts nano hello.ts
Inside text editor for file hello.ts, write
console.log('Hello World!');. Then, press
Ctrl + X to exit, press
Y to save and press
Enter save file as hello.ts. Then continue type following one by one again.
tsc hello.ts node hello.js
It will show same result as above like the following screenshot.
This is not the end of the TypeScript Angular 2. There are so much left we have to learn about TypeScript to take its full advantages. I will post the remaining later by dividing into two parts: Part 2 that explains changes made in ES2015 and ES2016 and Part 3 about the amazing features of TypeScript.
Thank you for reading and sharing would be my pleasure if you enjoy this post. Cheers.