Skip to content

TypeScript

Paul van Brenk edited this page Dec 12, 2017 · 9 revisions

🎵Note: This documentation is outdated at this point, especially when using the Node tools in Visual Studio 2017. We're working on update docs, and will redirect you to those when they're ready.

NTVS supports writing your Node.js applications using TypeScript.

TypeScript Installation

  • Visual Studio 2015: TypeScript is included in the Web Tools installation.

  • Visual Studio 2017: TypeScript is included in the Node.js workload.

Using TypeScript

This section shows many NTVS features in the context of a TypeScript project. See the respective feature documentation for more details.

You will find the TypeScript templates under Templates \ TypeScript \ Node.js:

New Project

Every TypeScript project includes .d.ts files for node and for the packages used by the project template.

d.ts

This will give you a great IntelliSense experience, even inside of callbacks:

IntelliSense

NTVS has item templates to add new TypeScript files, including templates for unit tests:

Build Output

For *.ts and *.d.ts files to be compiled, the Build Action property must be set to TypeScriptCompile. This is done automatically when a *.ts file is added to the project.

Build Output Files

When you build, the TypeScript compiler is invoked:

Build Output

The TypeScript compiler generates *.js and *.js.map files for every *.ts file in the project (but not *.d.ts files).

Note that the startup file (bolded) is the *.js file, despite the *.js file not being included in the project. You can see the build output files and other non-project items when Show All Files is enabled (the 3rd button from the right in the screenshot below).

Build Output Files

The debugger is TypeScript aware, so all debugging can take place in the TypeScript files. You can put breakpoints, get watch tooltips, etc.

Debugging

Test Explorer detects unit tests written in TypeScript. Click on Run Test or Debug Test to run the test under the debugger:

Unit Test

Profiling also works with TypeScript. The profiling report will browse to the TypeScript file when you click on View Source.

Profiling

Using TypeScript in a JavaScript project

If you've created a project using one of the JavaScript project templates, it won't have TypeScript build support or any of the TypeScript d.ts files.

When you add a TypeScript file to the project (using Add New Item, Add Existing Item or Include in Project), it will be updated to support TypeScript.

However, this won't add the node.d.ts file to the project. You can add the node.d.ts file to your project manually by copying it from the NTVS install folder or from a project created using a TypeScript template.

Adding TypeScript Type Definitions

The Type Definitions (.d.ts files) that are distributed with NTVS and included in TypeScript projects come from http://definitelytyped.org/.

You can get additional .d.ts files from their github repository, using TypeScript Definition manager (TSD) orDefinitelyTyped/tsd: TypeScript Definition manager for DefinitelyTyped.

TypeScript Definition manager (TSD)

TSD is a command line utility that downloads .d.ts files from the DefinitelyTyped repository. It is typically installed globally, and is located in your PATH so it can be used from anywhere.

TSD requires Git to be available in your PATH. You can download Git for Windows from GitHub Desktop - Simple collaboration from your desktop.

Option A: Using Command Prompt:

  1. Open Command Prompt.

  2. Type npm i tsd -g.

Option B: Install TSD using the Node.js Interactive Window:

  1. Open the Node.js Interactive Window with Ctrl + K, N.

  2. Type .npm install tsd -g

npm

Option C: Install TSD using the NTVS:

  1. Click on the npm node in Solution Explorer and select Install New npm Packages.

npm

  1. In the search box, type tsd.

  2. Select the Global dependency type.

  3. Uncheck Add to package.json.

  4. Click Install Package.

npm

Adding Type Definitions to the project with TSD

  1. Now that you have TSD installed globally, open a Command Prompt in Scripts folder of your solution.

Command Prompt

  1. Install the .d.ts that you require, for example mocha.d.ts:

Install Mocha.d.ts

  1. Right-click the .d.ts file and select Include in Project.

Include in Project