Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

SPFx Series 4 – Enabling IntelliSense for Typescript in Visual Studio Code

Overview

In this post, we will see that, how to enable the IntelliSense for TypeScript. There are three ways, we can enable the IntelliSense for TypeScript.

  • Using  ///reference – File Scope Method
  • Using tsconfig.json Method
  • Using typings Method

Using ///reference – File Scope Method

  1. Opened Visual Studio Code with current folder AngularTS from my command prompt, C:\Samples\AugularTS> code .
  2. Created a new sub folder src under AngularTS and added two files sample1.ts and sample2.ts
  3. Now add the following code snippets in the sample1.ts file

    07182016 - 1

  4.  
  5. When we try to access the Greeter class from sample2.ts, we won’t get the IntelliSense for that.
  6. Similar to JavaScript, we can enable the IntelliSense by explicitly reference the file.  See the example below.07182016 - 2
  7.  

Using tsconfig.json Method

Under the root folder AngularTS, lets add a new file called, tsconfig.json and add the following code. Now we try to access the Greeter class in sample2.ts file, we can see the IntelliSense, without reference the files.

07182016 - 3

Using typings Method

We can follow this approach, suppose if we want to enable the IntelliSense for AngularJs or ReactJs inside our source code. First we need to install the node module typings globally

https://www.npmjs.com/package/typings

07182016 - 4

For enabling the TypeScript IntelliSense, lets execute the command one by one.

  1. Create a typings.json file using typings init command
  2. Install the AngularJs definition file using typings install –save –global dt~angular
  3. Now we can see that, typings.json file added under the AngularTS folder.
  4. Open the typings.json file, we can see that the installed angular definition dependencies added here.
  5. 07182016 - 5

Now we can try the angular syntax, we can get the IntelliSense.

07182016 - 6

 

 

 

 

 

Summary

For our development, mostly we will use tsconfig.json approach for internal code IntelliSense and typings approach for external modules IntelliSense like Angular, Angular Route, ReactJs.

Add comment

Loading