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 Opened Visual Studio Code with current folder AngularTS from my command prompt, C:\Samples\AugularTS> code . Created a new sub folder src under AngularTS and added two files sample1.ts and sample2.ts Now add the following code snippets in the sample1.ts file   When we try to access the Greeter class from sample2.ts, we won’t get the IntelliSense for that. Similar to JavaScript, we can enable the IntelliSense by explicitly reference the file.  See the example below.   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. 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 For enabling the TypeScript IntelliSense, lets execute the command one by one. Create a typings.json file using typings init command Install the AngularJs definition file using typings install –save –global dt~angular Now we can see that, typings.json file added under the AngularTS folder. Open the typings.json file, we can see that the installed angular definition dependencies added here. Now we can try the angular syntax, we can get the IntelliSense.           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.