Referencing auto-generated JavaScript files from TypeScript in Visual Studio

Question

I am developing a web application in Visual Studio 2012 and I have a solution with a few projects. Also, I am using the TypesScript plugin (version 1.0RC) and I would like to keep all TypeScript development in a separate project while only referencing the auto-generated JavaScript files in projects that actually need to use them. To do so, I have tried a couple of approaches but I'm not completely satisfied with none of them.

Consider the directory tree of the two projects below:

WebProject
|
– /img
– /includes
– /js
– index.html
– web.config

TypeScriptProject
|
– file1.ts
– file2.ts

I want to keep the updated version of all auto-generated JavaScript files from TypeScriptProject (in this case, file1.js and file2.js ) inside the js folder of WebProject . Here's what I've tried so far:

1. Adding the JavaScript files as a regular file in WebProject : this doesn't work since a new copy of the file is created in the js folder. This new copy won't reflect future changes made to the original TypeScript file.
2. Adding the auto-generated JavaScript files as a link in WebProject : this seemed to work at first using some specific settings , but then I realized that it doesn't work in all environments for some reason I am not aware of yet.

If anyone has a better solution in mind (or in use), it would be greatly appreciated.

Answer 1

You could use grunt-ts with the --outDir option : https://github.com/grunt-ts/grunt-ts#compiler-support

Here is a sample grunt file to get you started: https://github.com/grunt-ts/grunt-ts/blob/master/sample/Gruntfile.js

Answer 2

Starting from VS 2013 Update 2 RC, now you can edit a TypeScript project settings in order to do exactly what was described in the question.

To do so, go to the project properties, then select the TypeScript Build tab. In the Output area, check the option Redirect JavaScript output to directory and define which directory you want to copy your JavaScript files to.