Categories: Angular 2

Getting started with TypeScript & Angular 2

In the This Tutorial, we are going to take a look at different snippets showing some of the features of TypeScript. In order to be able to run the snippets and play with them yourself, you’ll need to install the TypeScript compiler on your computer. Let’s take a look at how to do this.

TypeScript is best installed using Node Package Manager (npm). I’d recommend you to use npm Version 3.0.0 or newer. If you don’t have node.js and npm installed already, you can visit https://nodejs.org and follow the instructions there.

Installing TypeScript with npm

Once you have npm installed and running, verify that you have the latest version by opening your terminal window and running the following command:

$ npm –v

In order to install TypeScript 1.8, use:

$ npm install -g typescript@1.8

The preceding command will install the TypeScript compiler and add its executable (tsc) as global to your path.

In order to verify that everything works properly, you can use:

$ tsc –v
Version 1.8.0

The output should be similar to the preceding one, though possibly with a different version.

Running our first TypeScript program

Now, let’s compile our first TypeScript program! Create a file called hello.ts and enter the following content:

// dunebook/hello-world/hello-world.ts
console.log('Hello world!');

Since you’ve already installed the TypeScript compiler, you should have a global executable command called tsc. You can use it in order to compile the file:

$ tsc hello.ts

Now, you should see the file hello.js in the same directory where hello.ts is. hello.js is the output of the TypeScript compiler; it contains the JavaScript equivalent to the TypeScript you wrote. You can run this file using the following command:

$ node hello.js

Now, you’ll see the string Hello world! printed on the screen. In order to combine the process of compiling and running the program, you can use the package ts-node:

$ npm install -t ts-node

Now you can run:

$ ts-node hello.ts

You should see the same result, but without the ts-node file stored on the disk.

Playing with Angular 2 and TypeScript

Now, let’s play around with the files we already have! Navigate to the app/dunebook2/ts/hello-world directory or create new one if you haven't yet. Then, open app.ts and replace its content with the following snippet:

// dunebook2/ts/hello-world/app.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'app',
  templateUrl: './app.html'
})
class App {
  target: string;
  constructor() {
    this.target = 'world';
  }
}

bootstrap(App);

Let’s take a look at the code line by line:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

Initially, we import the @Component decorator from the angular2/core module and the bootstrap function from angular2/platform/browser. Later, we use @Component to decorate the App class. To the @Component decorator, we pass almost the same object literal that we used in the ECMAScript 5 version of the application, and this way, we define the CSS selector for the component.

As a next step, we define the view of the component. However, note that in this case, we use templateUrl instead of simply inlining the component’s template.

Open app.html and replace the file’s content with <h1>Hello {{target}}!</h1>. The content of app.html should be the same as the inlined template we used previously. Since we can use a template by both inlining it (with template) and setting its URL (templateUrl), the component’s API is quite similar to the AngularJS 1.x directives API.

In the last line of the snippet, we bootstrap the application by providing the root component.

Digging into the index

Now, let’s take a look at index.html in order to get a sense of what goes on when we start the application:

<!-- dunebook2/ts/hello-world/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= TITLE %></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>
  <app>Loading...</app>
  <!-- inject:js -->
  <!-- endinject -->
  <%= INIT %>
</body>
</html>

Note that inside the body of the page, we use the app element with the content of the text node, "Loading…", inside. The "Loading…" label will be visible until the application gets bootstrapped and the main component gets rendered.

Note

There are template placeholders <%= INIT %> and <-- inject:js… that inject content that is specific to individual demos. They are not Angular specific but instead aim to prevent code duplications in the code samples attached to the book because of the shared structure between them. In order to see how this specific HTML file has been transformed, open /dist/dev/dunebook2/ts/hello-world/index.html.

Deven Rathore

Deven is an Entrepreneur, and Full-stack developer, Constantly learning and experiencing new things. He currently runs CodeSource.io and Dunebook.com.

Published by
Deven Rathore

Recent Posts

6 Tips for Designing Your Unique Blog

If done correctly, a blog can be hugely successful; it can create a large following,…

2 weeks ago

How to Record and Transcribe a Google Hangouts Meet Video

As we all know, the current COVID-19 situation has brought the entire world to a…

3 weeks ago

5 Signs You Need To Hire A Website Designer

As the digital face of your business, how your website is perceived to the outside…

3 weeks ago

21 Chrome Extensions for Web Development

Since its introduction in 2008, Google Chrome has become the most used and the most…

3 weeks ago

15 cool React Admin Templates

As a react developer, building your Admin Template from scratch can be quite stressful and…

4 weeks ago

Web and App Frameworks Most Susceptible to Hacking

Hackers target web and app frameworks to try and exploit inbuilt weaknesses. Over the years,…

1 month ago