Jurjan Brust

Superheroes

Want to get started developing AngularJS / TypeScript applications using Visual Studio Code? In this blogpost I will show you how to get started in less time than a coffee break.

shadow

Prerequisites

  1. Download and install Visual Studio Code
  2. Download and install NodeJS LTS
  3. (recommended) Visual Studio Code extension Live Server for local webserver and live reload

Complete video of all the steps

First let’s start with a video containing all the steps needed to get up and running. Everything I have done in this video will be described below.

shadow

Project installation steps

  1. Create a directory for your project, for example ‘SuperHeroes’
  2. Start Visual Studio Code, open the created directory and open a Terminal (Ctrl+Shift+`)
  3. Execute the following three commands to install: typescript, angular and the types of angular (for code completion, and syntax highlighting):
npm install --save-dev typescript
npm install --save-dev angular
npm install --save-dev @types/angular
  1. Create a ‘src’ and ‘out’ folder
  2. Create a ‘superheroes.html’ file containing the following code:
 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <script src="/node_modules/angular/angular.min.js"></script>
 5    <script src="/out/superheroes.js"></script>
 6  </head>
 7
 8  <body>
 9    <superheros></superheros>
10  </body>
11</html>

open raw file

  1. Create a ‘superheroes.ts’ file containing the following code:
 1var module = angular.module('superHeroesApp', []);
 2
 3interface ISuperHero {
 4  id: number;
 5  name: string;
 6}
 7
 8const SUPERHEROS: ISuperHero[] = [
 9  { id: 11, name: 'Mr. Nice' },
10  { id: 12, name: 'Narco' },
11  { id: 13, name: 'Bombasto' },
12  { id: 14, name: 'Celeritas' },
13  { id: 15, name: 'Magneta' },
14  { id: 16, name: 'RubberMan' },
15  { id: 17, name: 'Dynama' },
16  { id: 18, name: 'Dr IQ' },
17  { id: 19, name: 'Magma' },
18  { id: 20, name: 'Tornado' },
19  { id: 21, name: 'Superman'}
20];
21
22class SuperHerosComponentController implements ng.IController {
23
24  public heros: ISuperHero[];
25
26  constructor() {}
27
28  public $onInit () {
29    this.heros = SUPERHEROS;
30  }
31}
32
33class SuperHerosComponent implements ng.IComponentOptions {
34
35  public controller: ng.Injectable<ng.IControllerConstructor>;
36  public controllerAs: string;
37  public template: string;
38
39  constructor() {
40    this.controller = SuperHerosComponentController;
41    this.controllerAs = "$ctrl";
42    this.template = `
43      <ul>
44        <li ng-repeat="hero in $ctrl.heros">{{ hero.name }}</li>
45      </ul>
46    `;
47  }
48}
49
50angular
51  .module("mySuperAwesomeApp", [])
52  .component("superheros", new SuperHerosComponent());
53
54angular.element(document).ready(function() {
55  angular.bootstrap(document, ["mySuperAwesomeApp"]);
56});

open raw file

  1. Press Ctrl+Shift+P and execute : ‘TypeScript: Go to Project Configuration’ and select ‘Configure tsconfig.json’ in the popup window on the bottom right side.

  1. This will create a tsconfig.json file. Open it, and add the “outDir” entry, because we want the transpiled TypeScript files to be stored in the ‘out’ directory and not the ‘src’.
 1{
 2    "compilerOptions": {
 3        "module": "commonjs",
 4        "target": "es2016",
 5        "jsx": "preserve",
 6        "sourceMap": true,
 7        "outDir": "out"
 8    },
 9    "exclude": [
10        "node_modules",
11        "**/node_modules/*"
12    ]
13}

open raw file

  1. Run the build tasks (Ctrl+Shift+B) and select ‘tsc: watch -tsconfig.json’ to automatically transpiled the TypeScript on every file change. Notice that the ‘out’ folder now contains a JavaScript file and superheroes.js.map file.

  2. Start a local server using the Live Server extension mentioned in the prerequisites and your browser should display a list of heroes! Notice that when you make a change in the TypeScript the file gets transpiled and your browser will reflect the changes without user interaction! Great!

Debugging

Finally, I will show you how you can debug your TypeScript code using breakpoints. Please make sure that the Live Server is still running. Also notice that we need to change the url in the launch.json to reflect this.

shadow

Great, you did it… now go and grab a coffee because you deserve it 😄