TypeScript - Setup Development Environment

In this chapter, you will learn how to install TypeScript, create and build your first TypeScript code, and compile your code using the TypeScript compiler.

There are two ways to install TypeScript:

  1. Install TypeScript using Node.js package manager (npm).
  2. Install the TypeScript Plug-in in your IDE (Integrated Development Environment).

Install TypeScript using Node.js Package Manager

Node.js package manager is used to set up TypeScript on your local environment.

To run TypeScript locally you will need: Node.js, TypeScript, and a code editor of your choice. Learn how to install Node.js in the install Node.js chapter.

We will be using Node.js package manager (npm) to install TypeScript. To install TypeScript, open command prompt on Windows and type the following command:

> npm install -g typescript

Once installed, you can check the TypeScript version using the following command:

> tsc -v
Version 2.8.1

As of writing this tutorial, the latest TypeScript version is 2.8.1.

Install TypeScript Plug-in in your IDE

You will write your TypeScript programs in your IDE and save your file with .ts extension. You can use any IDE of your choice such as Visual Studio, Sublime Text, Eclipse, Atom, WebStorm etc.

If you wish to enable TypeScript Development Environment for your choice of IDE, you will need to install an IDE-specific TypeScript package or plugin for your development environment.

A few examples of plugins for popular code editors are:

  1. Atom-TypeScript: a TypeScript language service for Atom developed by TypeStrong.
  2. TypeScript IDE for Eclipse: an Eclipse plugin developed by Angelo Zerr.
  3. TypeScript Plug-in for Eclipse: an Eclipse plugin developed by Palantir.
  4. WebStorm includes TypeScript support out of the box.

For a full list of IDEs that support TypeScript development and the package/plugin needed to install TypeScript support Please visit the official wiki at Microsoft's TypeScript Github Repository.

TypeScript in Visual Studio

Visual Studio comes with TypeScript when installing Microsoft Web Tools. Install TypeScript SDK for Visual Studio 2017 from here and for Visual Studio 2015 from here.

You can also download and install TypeScript HTML Template from here. This will provide a template in Visual Studio to create TypeScript files.

Microsoft provides Visual Studio Code with TypeScript support built in. Visual Studio Code is an open source editor available on Windows, MacOS as well as Linux platforms. You can download Visual Studio Code from https://code.visualstudio.com.

TypeScript Playground

TypeScript provides an online playground https://www.typescriptlang.org/play to write and test your code on the fly without the need to download or install anything.

This is a great place for beginners just starting to learn TypeScript who want to try different TypeScript features. You also have the option to share your code via a shareable link provided by the playground.

Additionally, you can also select options for error checking your code!

TypeScript Playground

In the next chapter, you will learn to write your first simple TypeScript program.