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.

Image for post
Image for post
Visual Studio Code IntelliSense for AngularJS Using TypeScript Definitions

To add this TypeScript feature to a JavaScript project, you will need to install TypeScript globally and the TypeScript definition files (extension .d.ts) for the modules and packages used in your project. We will be using the Typings package to manage TypeScript definition files.

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`
typings.json file

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

or

$ 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.

Typings Folder

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.

Frontend Weekly

It's really hard to keep up with all the front-end…

Carlos Raiti Mendoza

Written by

Software Developer. Focused. Determined. Unstoppable.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Carlos Raiti Mendoza

Written by

Software Developer. Focused. Determined. Unstoppable.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store