Using TypeScript in Visual Studio Code

With the recent announcement of Visual Studio Code, there have been a lot of questions about how to get started writing TypeScript.  In this quickstart, we’ll create a simple TypeScript project.  Out of the box, Visual Studio Code supports TypeScript 1.5 beta and using either the node or Visual Studio command-line compilers.  For this quickstart, because of its use of the new tsconfig.json feature, we assume you already have TypeScript 1.5 beta installed.  

Let’s start by making a new empty folder, MyProject, and opening it in Visual Studio Code. In Window, click “Open Folder”; on OS X, click “Open” and select a folder:

Create a new file by clicking “New FIle” in the MyProject row of the Explore Sidebar:

Enter “tsconfig.json” as the filename

Type { } in the file and hit Ctrl-Space between the braces to trigger completion:

We can configure the project for ES5, AMD modules, and source maps:

Using “New File” again, add a TypeScript file and try writing some code in it:

Before anything else, let’s try compiling with the Ctrl-Shift-B shortcut key. A message appears telling us that we don’t have a task runner enabled for this project yet. Click “Configure Task Runner” to set up a config file:

Remove “HelloWorld.ts” from the “args” array, and add a property called “isShellCommand” with the value ‘true’ in the config file:

While your application is building, you’ll notice an indicator at the bottom left of the screen

The icons show source control status, build indicator (spinning), number of errors, and number of warnings.  You can click on the source control, error, and warning indicators for more information.

In the lower right corner, you’ll see the rest of the status bar, showing the cursor position, line endings, language, and smiley. Click the smiley to send us feedback!