Introduction
We have covered the definition, uses of TypeScript, why we need to use TypeScript and how to use TypeScript with Node.js and any editor like notepad in the previous article. Please click the below link to go through the previous article.
In this article, we are going to learn how to use TypeScript with visual studio 2015 Update 3.
We don’t have to install TypeScript in visual studio 2015 Update 3. It includes TypeScript by default. We will be typing IntelliSense while working in visual studio.
We can see in the below image.
We have to follow some simple steps to achieve this.
First of all, we have to click File -> New -> Project as below image.
Now Select the ASP.NET Web Application (.Net framework) and enter the name as a TypeScriptProject and Click OK.
Select a template as an Empty and click OK as below.
Now Right Click on the Project file - > Add -> New Item…
Select an Item as a TypeScript File and enter the name as an index.ts and click Add as below image.
If any popup asks you about searching for TypeScript Typings then click on Yes.
Now open the index.ts file and write the code like below.
We are just writing alertbox here, we will focus more on codewise in our next articles.
alert("First TypeScript Program");
Same as above, add the HTML file in the project.
Select an Item as an HTML Page and enter the name as an index.html and click Add as below image.
Now open the index.html file and drag and drop the index.ts file into the index.html (head section of HTML tag) and we will see the src name is index.js instead of index.ts in the script tag. Because as we discussed in our earlier article, the browser is not capable to understand TypeScript So the TypeScript compiler is responsible to convert TypeScript code to JavaScript code with the JavaScript File.
Now whenever we will build the project or will save the TypeScript File, the TypeScript Compiler compiles the TypeScript file (.ts) and generates the JavaScript file with the same name. It will load the generated JavaScript file into the index.html file.
When we will click the Show All Files from the Solution Explorer, we can see all the hidden files including our generated JavaScript File (index.js) as below.
Now it's time to run the program and see the output as below.
Summary
In this article, we have covered, how to use TypeScript with visual studio update 3 for the first time and in the upcoming article, we are going to focus on coding in TypeScript.