microsoft/TypeScript
1
0
Fork 0
mirror of https://github.com/microsoft/TypeScript.git synced 2026-02-10 06:41:59 -06:00
Code Issues Packages Projects Releases 212 Wiki Activity

Update Using-TypeScript-With-ASP.NET-5.md

Daniel Rosenwasser 2015-08-07 16:37:45 -07:00
parent 46a605e2de
commit 2b9efd6b35
1 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
Using-TypeScript-With-ASP.NET-5.md

@ -9,13 +9,14 @@ We start by creating a new empty ASP.NET v5 project in Visual Studio 2015, of yo
![Create new Empty ASP.NET Project](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/new-project.png)
Next add a `scripts` folder to the root of our project.
This is where we'll add the TypeScript files and the [tsconfig.json](tsconfig.json.md) 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.
This is where we'll add the TypeScript files and the [`tsconfig.json`](tsconfig.json.md) 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.
![Project layout](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/add-tsconfig.png)
![Adding a 'tsconfig.json' file in Visual Studio](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/add-tsconfig.png)
![Project layout](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/project.png)
![A project in Visual Studio's Solution Explorer](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/project.png)
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:
@ -26,31 +27,34 @@ Finally we have to add the following option to the `"compilerOptions"` node in t
This is potentially what a tsconfig.json might look like once configured.
```json
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot"
}
}
{
"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.
![Files after build](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/postbuild.png)
##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 the tsconfig.json are considered not to be part of the virtual project.
In the image below, the virtual project can be visualized, and is the that which is contained within the blue rectangle.
## Project vs Virtual Project
![Compile on Save](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/virtual-project.png)
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.
![A virtual project in Visual Studio's Solution Explorer](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/virtual-project.png)
![Compile on Save](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/compile-on-save.png)
## 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.
![Compile on Save](https://raw.githubusercontent.com/wiki/Microsoft/TypeScript/aspnet-screenshots/compile-on-save.png)