Video Course

Getting Started with Angular v4: Lesson 4 of 26

TypeScript Setup

Up Next

TypeScript Fun

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

Sign Up Now

Login to your account

⬇⬇⬇ Important: There have been updates since this video was created. Read the notes below. ⬇⬇⬇

Important Notes

Make sure to create a .ts file so that npm start has a file to use. For instance, create a test.ts file so that npm start and TypeScript has something to compile.

A new line needs to be added to the tsconfig.json:

lib": ["es2015", "dom"]

If you run into issues running npm start, change your start script to the following:

"start": "concurrently \"npm run tsc:w\" \"npm run lite\"",

Updated Setup

No need to install the typings package. Now those packages are available via npm.

To install everything, run:

npm install --save-dev typescript @types/node @types/jasmine @types/core-js

Our tsconfig.json will be the same:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "lib": ["es2015", "dom"]
  }
}

There will be no need for the typings.json file or the typings npm scripts in our package.json. The new package.json scripts section looks like this:

"scripts": {
  "start": "concurrently \"npm run tsc:w\" \"npm run lite\"",
  "lite": "lite-server",
  "tsc": "tsc",
  "tsc:w": "tsc -w"
},

Even easier!

Old Setup

This is the setup shown in the video above. While it is still valid, the new way is recommended since it's simpler and doesn't require the typings package.

We'll need to install both TypeScript and typings.

TypeScript is going to be our transpiler to get ES6 code to ES5 so that browsers can understand our JavaScript.

Typings is a tool that allows TypeScript to get code hinting and to understand what external libraries methods are.

Install both with:

npm install --save-dev typescript typings

Now we need a tsconfig.json and typings.json. Create those with the following data:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160818175514"
  }
}

We'll also be using concurrently to run both lite-server and our TypeScript watcher at the same time. Install that with:

npm install --save-dev concurrently

Add the following npm scripts to your package.json

"scripts": {
  "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
  "lite": "lite-server",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings",
  "postinstall": "typings install"
},

Chris Sevilleja

157 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.