Getting Started With Visual Studio Code, TypeScript and Express Application

Wonder how to get started writing an Express application in TypeScript using Visual Studio Code? This article explains everything you need to get your application running with TypeScript using Visual Studio Code

Written by 42ID on September 12 2015

Visual Studio Code is now my favourite text editor for writing front end JavaScript code. I am especially fond of the Intellisense features and the ability to natively debug NodeJs applications. Recently, I wanted to make the transition from using JavaScript to TypeScript and found that there were no concise documentation on how to port a base ExpressJs application to TypeScript and use it within a Visual Studio Code environment.

Here, I am going to break down the steps needed to start programming ExpressJs applications with TypeScript. If you don't have Visual Studio Code, you can download it from Microsoft's site here.

First, fork or download czechboy0's github project This project provides a base ExpressJs application ported to TypeScript. Open the project using Visual Studio Code.

Next, execute npm install to download and install all package dependencies

$ npm install

In order to provide type definitions for your regular JavaScript libraries, provides definition files for common JavaScript libraries. TSD is a npm module that manages adding these definition files to your project. TSD is installed locally when you execute the above command. In order to refresh and pull the latest type definition files, run the following command

$ ./node_modules/.bin/tsd reinstall -so

Next, we need to configure the build task for Visual Studio Code to tell it what commands to run on build. Since this is a TypeScript application, we will configure the build task to invoke the TypeScript transplicer tsc.

To open the task configuration settings, press Ctrl+Shift+B in Visual Studio Code. The first time you invoke this command, Visual Studio Code will inform you that no current configuration exists and asks if you want to create one. Click on 'Configure Task Runner' to set this up.

This opens up the tasks.json file with default configurations.

The "command" attribute specifies the TypeScript complier to call. If you have tsc globally installed, you can leave it as the default value. Otherwise, specify the path to the TypeScript compiler. Next, configure the "args" section to pass in the options to the TypeScript compiler to create sourcemaps, to use commonjs module configuration and specify the start file as ./bin/www.ts

Click Ctrl+Shit+B again to start the build task. On successful build, you will see the corresponding .js files transpliced from the .ts files.

To debug the application, click on the debug tab on Visual Studio Code and click on the play button.

The first time you invoke this command, Visual Studio Code will open the launch.json file. Here, configure the start file as ./bin/www.ts and set sourceMap to true in order to enable debugging using TypeScript.

Click on play button again to launch the application. You can then navigate to http://localhost:3000 to see your application.

Now, because TypeScript files are transpliced into JavaScript files, you will also see the corresponding js files in your project folder. If you wish to hide these files from showing up on the solution explore, you can configure a filter for the files.

Create a file settings.json under the .settings folder (.vscode for newer version of Visual Studio Code) and enter the following section to hide the transpliced js files from the project folder view.

As soon as you save the settings file, the project folder will refresh to exclude the transpliced js files.

In future articles, we'll cover adding further automation to our project for building and running unit tests.

Was this useful?

Have questions? We have answers. Contact us, we are glad to help!

Spread the word if you found this useful! Tweet us at @thelatestbrian and @yanamegainfo

Other articles you may be interested in:

Have a topic you'll like us to cover? Send us a message on Twitter!