Using TypeScript With ASP.NET 5 - zhengbli/TypeScript GitHub Wiki
Using TypeScript with ASP.NET v5 requires that you setup your project in a specific way. For more information about ASP.NET v5 see the ASP.NET v5 documentation. The current tsconfig.json support in Visual Studio projects is a work in progress, which is tracked in issue #3983.
Project setup
We start by creating a new empty ASP.NET v5 project in Visual Studio 2015, of you're not familiar with ASP.NET v5 follow this tutorial for more information.
Next add a scripts
folder to the root of our project.
This is where we'll add the TypeScript files and the tsconfig.json
file to set our compiler options.
Please note that the names and locations of the folders are pertinent to get the solution working correctly.
To add a tsconfig.json
file, simply right click on the scripts
folder, navigate to Add
, then New Item
.
Under Client-side
, you can find it, as can be seen below.
Finally we have to add the following option to the "compilerOptions"
node in the tsconfig.json
file to redirect the compiler output to the wwwroot
folder:
"outDir": "../wwwroot/"
This is potentially what a tsconfig.json might look like once configured.
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot"
}
}
Now if we build our project, you'll notice the app.js
and app.js.map
files were created in the root of our wwwroot
folder.
Project vs Virtual Project
When adding a tsconfig.json
file, it is vital to understand that this creates a virtual typescript project within the folder where the tsconfig.json
is located.
TypeScript files that are considered part of this virtual project will not be compiled when saving changes.
TypeScript files that are outside of the folder containing tsconfig.json
are not considered part of the virtual project.
In the image below, the virtual project can be visualized, and is the that which is contained within the red rectangle.
Compile on Save
In order to enable Compile on Save for ASP.NET v5 projects, you have to enable Compile on Save for TypeScript files which are not part of a virtual TypeScript project.
The setting for the selected module type in that dialog will be ignored if a tsconfig.json
file is part of the project.