The standard way to develop with Typescript in Visual Studio 2015 (ASP.NET 5, MVC6) is to create a so called "virtual project" in a folder. That's a Typescript project inside a Web-C# project. This embedded Typescript project automatically compiles Typescript files on build.
The better way is to let gulp do the compilation. But let's start with the standard way (the few steps you do here are required later anyway).
Setup the virtual Typescript project:
- Add a folder for Typescript scripts to the Web project, e.g. "./Scripts"
- Add your *.ts files to the "./Scripts" folder
- A Visual Studio build will generate "scripts.js" and "scripts.js.map" (.map for debugging Typescript source code in IE or at least watching Typescript in Chrome).
- Add a reference to "scripts.js" in your HTML like this: <script src="/js/ts/scripts.js"></script>.
The *.ts files are only compiled and bundled when the project is built. No edit/save/reload-browser cycle. The debug session must be stopped to make new Typescript code available for browser reload.
Here is the code: https://gist.github.com/wolfspelz/d494bd8a1ba56ff81c91
Here are the steps:
- Add a file "_tsconfig.json" to the Scripts folder (can be any name, but the name appears in "gulpfile.js"). I just renamed my existing "tsconfig.json" to "_tsconfig.json" to hide it from Visual Studio and re-use it with gulp-typescript.
- Add gulp modules by editing "package.json". Visual Studio should download lots of node packages.
- Add gulp tasks by editing "gulpfile.js" in three places:
- You might check if the "watch"/"compile-ts" workflow works by starting "watch" and editing/saving a Typescript file in the Scripts folder.
- Check if the "scripts.js" is generated along with it's "scripts.js.map".
- Start a debug session.
- Change Typescript code. Reload browser.