Getting started with TypeScript in Visual Studio Code

This is a super short introduction to start writing TypeScript in Visual Studio Code. This tutorial is written for Windows users, but it should be roughly the same procedure for Linux and OS X users, since all these tools are cross platform.

Published:

This post is not actually about writing TypeScript, it's just a guide to set up VS Code correctly to be able to write and compile TypeScript.

Install Visual Studio Code and Node.js

First download VS Code and Node.js and install both.

Make sure npm, node.js' package manager is added to path. Open a command window and enter

npm -v

If you get an error, reboot. If you still get an error, make sure npm and nodejs have been added to your path:

How to check if something is included in path in Windows

  1. Right-click My Computer

  2. Select Properties

  3. Select Advanced system settings

  4. Select tab Advanced

  5. Click on Environment Variables

There are two Paths, one for your user (at the top of the window) and one systemwide (at the bottom).

Select Path and click Edit. The path for your user should contain this:

C:\Users\[username]\AppData\Roaming\npm;

The system wide path should contain this:

C:\Program Files\nodejs\;

Install TypeScript

Open a command window and enter this:

npm install -g typescript

To use TypeScript with Visual Studio Code, you need the latest version of TypeScript, 1.5. Open a command window and enter:

tsc -v

If you get anything below 1.5, you have an old version of TypeScript installed (probably from Visual Studio).

You need to remove the old version from path. Follow the instructions above for changing your path, and remove any references to directories or files that contain TypeScript or tsc.

You might need to reboot after changing path.

Creating your first TypeScript file

Create a new directory TypeScriptDemo and open this directory in VS Code. Create these files: app.ts, index.html and tsconfig.json.

Content of app.ts:

document.body.innerHTML = "Hello World!";

Content of index.html:

<script src="app.js"></script>

Content of tsconfig.json:

{
    "compilerOptions": 
    {
        "target": "ES5",
        "module": "amd",
        "sourceMap": true
    }
}

Create a directory .settings and inside that directory a file tasks.json.

Content of .settings/tasks.json:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": [],
    "problemMatcher": "$tsc"
 }

Convert your TypeScript files to standard JavaScript

Build your project, CTRL+SHIFT+B (You can find all available commands in VS Code by opening the Command Palette, CTRL+SHIFT+P).

After the build is finished, you should now have two new files, app.js and app.js.map.

Open index.html in a browser, and you should be greeted with Hello World!

Every time you do changes to your TypeScript files, simply build (CTRL+SHIFT+B) to convert them to JavaScript files. Make sure you don't do any modifications to the JavaScript files directly, since they will always be overwritten by the build process.

Categories: TypeScript VS Code

Comments