TypeScript Environment Setup Tutorial

In this TypeScript tutorial we show you how to setup a development environment by installing Typescript, Node.js and Visual Studio Code.

We also discuss TypeScript addons/plugins/extensions for Visual Studio 2017/2019, Sublime Text, Atom, Eclipse, WebStorm, Vim and Emacs.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

The Typescript Environment

The TypeScript environment requires three things before we can start writing scripts:

  • Node.js Package Manager (npm)
  • The TypeScript compiler
  • A text editor or IDE (Integrated Development Environment)

Install Node.js

Node.js comes bundled with the Node Package Manager (npm), installing Node will install npm as well.

First, let’s see if we already have Node.js installed on the system.

Windows:

Click on Start/Windows button, type cmd and press Enter to launch the Command Prompt.

Mac:

Open Applications > Utilities and double-click on Terminal.

Linux:

Press Ctrl + Alt + T to open the terminal.

Type in the following command and press Enter/Return.

Command:
 node -v

If Node.js is installed, it will show a version number, similar to the one below.

Output:
 v12.14.1

If you don’t have Node.js installed, please follow the steps below to install it on your system.

Windows:

  1. Point your browser to the Node.js DownloadsOpens up in a new page page.
  2. Ensure that you are selecting from the LTS (Long Term Support) tab.
  3. Choose either the 32 bit or 64 bit .msi installer based on whichever version of Windows you're runningOpens up in a new page .
  4. Once the download has finished, launch the installer and follow the steps in the installation wizard.

Mac:

  1. Point your browser to the Node.js DownloadsOpens up in a new page page.
  2. Ensure that you are selecting from the LTS (Long Term Support) tab.
  3. Choose the 64 bit .pkg installer, based on which version of MacOS you’re running.
  4. Once the download has finished, launch the installer and follow the steps in the installation wizard.

Linux:

  1. Head over to NodesourceOpens up in a new page and follow the installation instructions.

Nodesource provides the official Node.js binary distributions.

Verify:

To verify that Node.js was installed, please repeat the steps above to check the version number.

Install TypeScript

There are two ways we can install TypeScript:

  • Install TypeScript using Node.js Package Manager (npm).
  • Install the TypeScript plug-in in your IDE (Integrated Development Environment).

Node Package Manager:

The easiest method is to install TypeScript as a Node.js package.

Open your Terminal / Command Prompt / Powershell and type the following command.

Command:
 npm install -g typescript

This will make the TypeScript compiler available for all your projects.

Type in the following command to test that TypeScript was installed successfully.

Output:
 tsc --version

If the installation was successful, you should see a version number similar to the one below.

Command:
 Version 3.7.5

NPM Local Install:

Experienced users can also install TypeScript locally in projects with the following command.

Command:
 npm install --save-dev typescript

This has the benefit of avoiding possible interactions with other TypeScript projects.

Setup Microsoft Visual Studio Code for TypeScript

In this tutorial course we’ll be using Microsoft Visual Studio Code as our IDE. If you want to follow along with VSCode, we discuss the setup below.

Visual Studio Code includes TypeScript language support automatically. Because we already installed the TypeScript compiler, all we need to do is install VSCode.

  1. Point your browser to the Visual Studio Code downloadsOpens up in a new page page.
  2. Choose a download based on your operating system and install VSCode once the download has finished.

A note for Windows users: If you are on a shared computer, please choose the User Installer. Otherwise, please choose the System Installer.

If you’re having trouble installing VSCode, please see the official documentationOpens up in a new page for help.

Other IDE TypeScript plugins/extensions

If you already use or want to use a different IDE, you can find the TypeScript plugins/extensions for yours below.