TypeScript for Angular 2 - Part 1 (An Introduction)

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

TypeScript is developed and maintained by Microsoft and it is an open source programming language. It supports all of the syntax and semantics of JavaScript while providing some extra features such as static typing and richer syntax by being a superset of ECMAScript. The following diagram shows the relationship between TypeScript and ES5, ES2015, ES2016.

relationship between TypeScript and ES5, ES2015, ES2016

Images taken from https://angular2buch.de

Why should we use TypeScript?

In Angular 2, we can still write, like the same way in Angular 1.x, with JavaScript. However, as all we know about JavaScript, we only find out about the mistake like misspell a object or a method name when we get a runtime error. We write lots of unit tests to prevent this before deploying our code to production. But these errors can still happen without being noticed.

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.

Although there are more benefits of using TypeScript over JavaScript in Angular 2, I think this would be enough for this post and let's take a look how to install and start using TypeScript.

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.

Installing TypeScript

Open Terminal and type the following command to install latest stable version of TypeScript using npm.

$ 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.

  1. 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 Sites/firstTypeScript.

  2. Then I will create a file called hello.ts with a content of console.log('Hello World!');.

  3. Open the Terminal and type $ cd Sites/firstTypeScript to get inside your program folder. The location may vary to yours. Then type $ tsc hello.ts to compile the file to JavaScript.

  4. Now, you should see hello.js file inside your program directory, which contains the JavaScript equivalent to the TypeScript you wrote.

  5. Type $ node hello.js to 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.
Our First TypeScript Program

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.

Nay Win Myint

Founder and CEO of Pancasikha Music Streaming Provider, JavaScript full-stack and Android developer and Graphic designer.

Rangoon, Myanmar