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 [email protected]

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.