TypeScript Installation and setup


Example

Background

TypeScript is a typed superset of JavaScript that compiles directly to JavaScript code. TypeScript files commonly use the .ts extension. Many IDEs support TypeScript without any other setup required, but TypeScript can also be compiled with the TypeScript Node.JS package from the command line.

IDEs

Visual Studio

Visual Studio Code

  • Visual Studio Code (vscode) provides contextual autocomplete as well as refactoring and debugging tools for TypeScript. vscode is itself implemented in TypeScript. Available for Mac OS X, Windows and Linux.

WebStorm

  • WebStorm 2016.2 comes with TypeScript and a built-in compiler. [Webstorm is not free]

IntelliJ IDEA

  • IntelliJ IDEA 2016.2 has support for Typescript and a compiler via a plugin maintained by the Jetbrains team. [IntelliJ is not free]

Atom & atom-typescript

Sublime Text

Installing the command line interface

Install Node.js

Install the npm package globally

You can install TypeScript globally to have access to it from any directory.

npm install -g typescript

or

Install the npm package locally

You can install TypeScript locally and save to package.json to restrict to a directory.

npm install typescript --save-dev

Installation channels

You can install from:

  • Stable channel: npm install typescript
  • Beta channel: npm install typescript@beta
  • Dev channel: npm install typescript@next

Compiling TypeScript code

The tsc compilation command comes with typescript, which can be used to compile code.

tsc my-code.ts

This creates a my-code.js file.

Compile using tsconfig.json

You can also provide compilation options that travel with your code via a tsconfig.json file. To start a new TypeScript project, cd into your project's root directory in a terminal window and run tsc --init. This command will generate a tsconfig.json file with minimal configuration options, similar to below.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "pretty": true
    },
    "exclude": [
        "node_modules"
    ]
}

With a tsconfig.json file placed at the root of your TypeScript project, you can use the tsc command to run the compilation.