TypeScript - Developing TypeScript with Visual Studio Code IDE

Visual Studio Code (VS Code) has built in TypeScript language support. However, it does not come with TypeScript compiler. We need to install that separately. Checkout our getting started tutorial to install TypeScript. Download VS Code from here.

Creating TypeScript project in Visual Studio Code

Create an example project directory say 'typescript-with-vs-code-example':

D:>mkdir typescript-with-vs-code-example

Opening the folder in VS Code:

D:>cd typescript-with-vs-code-example

That will open the VS Code in example folder:

Close 'Welcome' tab:

Open View>Terminal (Ctrl+`) and init TypeScript project (tsc --init):

Open tsconfig.json file (tutorial) in editor and modify to:

Create a TypeScript source file in ts-src folder:

Create index.html file in web-app/index.html:

Don't forget to save the changes via File>Save All.

Running tsc --watch

To start tsc in watch mode use shortcut Ctrl+Shift+B

Select the second option 'tsc: watch - tsconfig.json', that will start tsc in watch mode:

Now updating/saving or creating new TypeScript files will trigger the compilation to JavaScript automatically.

Installing Live Server Extension

'Live Server' extension runs a local server with live reload feature.

Select extension icon and type 'live server' as shown:

Install the server and reload. A 'Go live' icon will appear at the bottom:

Click on the 'Go Live' icon, that will open index.html in the browser (given that index.html is opened in the editor, otherwise it will show directory root in the browser).

Now all changes to the ts files and other files in web-app folder will get updated in browser on saving:

Example Project

Dependencies and Technologies Used:

• TypeScript 3.2.2
• Visual Studio Code 1.30.1