This blog post will teach you the correct way of setting up TypeScript in Visual Studio 2015. Please be advised this is not a tutorial on TypeScript as such.
- The first step that you need to follow is to install ASP.NET Core.
- Open VS2015 and choose new Project, you need to select ASP.NET 5 Template
- Out of the three options take the first one (Empty)
- Once the solution is created open the project.json and under dependencies add the following line, marked in red
- Please save the file or else there may be errors cropping up later.
- Delete the lines in Startup.cs for the given function and replace it with the following lines
- In the Project add a new folder called "scripts"
- Inside the scripts folder add a file "app.ts", this file is of type Typescript and will be available on your new items list
- Add the following code to your app.ts file
- We need to set up the config entries for the Type script compiler. On the scripts folder add a "New Item" TypeScript Configuration File, name it as tsconfig.json
- Add these lines into this file .
The important part of this file is the definition of your main application file as shown as in the files entry. These are the files which will be compiled to simple Javascript and a new file generated with .js extension.
- To set up the NPM package manager for installing and restoring different packages we need to set up npm. On the project right click and add a new item, from the list choose NPM Configuration file, name it as package.json . Inside this file add these lines. Visual Studio will start installing these packages when you save
the file, if it doesn't then right click on the file and choose "Restore Packages"
- Again on the root project folder add a new file called gulpfile.js. The following lines should be included here. Once you save the file, right click on it and click Task Runner Explorer, you may need to refresh the explorer if no entry is shown.
- Inside wwwroot add an HTML file called index.html. Copy the following code inside it
- Run the project and when you change any value on the text boxes, it will show an updated message on top.
Hope this helps you guys in running Typescript seamlessly on Visual Studio.