Including TypeScript Definitions in a non-TypeScript Project Using Visual Studio Code (VSC)
You can take advantage of one of the best features of TypeScript — smart code completion (IntelliSense) for modules and packages while using Visual Studio Code (VSC) — without needing to use it in a project.
1. Install TypeScript and Typings
a. Install TypeScript globally
$ npm install -g typescript
b. Install Typings globally
$ npm install -g typings
2. Setting Up Project
Note: run the command below from the root of your project.
Create typings.json, which will contain the list of the .d.ts files added to a project. This will allow you to simply run “$ typings install” in the future to install the .d.ts files of the libraries added to this file.
`$ typings init`
3. Installing TypeScript Definition Files for Modules and Packages
a. Find the .d.ts file for a library by name in the Typings registry.
$ typings search --name <nameOfLibrary>
Note: run the commands below from the root of your project.
b. The command to run depends on the type of package. To learn more, visit the Typings README.md. The “— save” flag will add a file to typings.json.
$ typings install <nameOfLibrary> --save
$ typings install dt~<nameOfLibrary> --global --save
4. Typings Folder
After adding the first TypeScript definition through Typings to your project, a typings folder is created. This folder has an index.d.ts file, which contains a reference to all of the TypeScript definition files that have been added to the project.
5. Making Smart Code Completion Work
Now, in order to take advantage within a file of smart code completion, add the tag below at the top of the file. Ensure that the path attribute points to the location of index.d.ts within the typings folder in relation to the file with the tag.
/// <reference path=”../../typings/index.d.ts” />
Take a look at the first image in this post for an example of where to place the tag above.