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