I am using Visual Studio 2015 with Typescript 1.5.4 and Resharper 9

This is the buggy scenario:

• I have about 180 typescript files
• I change single .ts file
• VS shows message "Generation of XXX.ts file complete. Remaining files still compiling"
• after that ALL my .ts files are compiled to .js
• 2 things were changed in those .js files: formatting is slightly different and reference for .js.map was removed
• When I build the whole project, then the .js files are generated again but with original formatting and with link to .js.map present

This is annoying because it generates too much noise in Git and it prevents me from debugging typescript files directly in browser. (because of that missing .js.map file)

The desired behaviour is of course that the only changed .ts file should be compiled on save. How to do it?

It seems that R# has nothing to do with this, because it continues to happen with R# disabled.

My current project settings:

-------------UPDATE-------------

I've tried to update to Typescript version 1.6. The PATH variable pointed to C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.4\ so I've updated that to point to 1.6

So when I now type tsc -v it says message TS6029: Version 1.6.2

But because of historical reasons (the project I work on is about 2 years old) I have to use version 1.4 inside VisualStudio. So in the .csproj is <TypeScriptToolsVersion>1.4</TypeScriptToolsVersion>

After this change the compile on safe stopped working completely.

Now I have to rebuild the whole solution :(

I am using Visual Studio 2015 with Typescript 1.5.4 and Resharper 9

This is the buggy scenario:

• I have about 180 typescript files
• I change single .ts file
• VS shows message "Generation of XXX.ts file complete. Remaining files still compiling"
• after that ALL my .ts files are compiled to .js
• 2 things were changed in those .js files: formatting is slightly different and reference for .js.map was removed
• When I build the whole project, then the .js files are generated again but with original formatting and with link to .js.map present

This is annoying because it generates too much noise in Git and it prevents me from debugging typescript files directly in browser. (because of that missing .js.map file)

The desired behaviour is of course that the only changed .ts file should be compiled on save. How to do it?

It seems that R# has nothing to do with this, because it continues to happen with R# disabled.

My current project settings:

-------------UPDATE-------------

I've tried to update to Typescript version 1.6. The PATH variable pointed to C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.4\ so I've updated that to point to 1.6

So when I now type tsc -v it says message TS6029: Version 1.6.2

But because of historical reasons (the project I work on is about 2 years old) I have to use version 1.4 inside VisualStudio. So in the .csproj is <TypeScriptToolsVersion>1.4</TypeScriptToolsVersion>

After this change the compile on safe stopped working completely.

Now I have to rebuild the whole solution :(

• javascript
• visual-studio
• compilation
• typescript

• 1 My workaround for now is this git command (work in unix shell or in Cygwin on Windows) git status | grep -v .js which filters out .js files. – David Votrubec Commented Nov 13, 2015 at 8:41
• does the configuration of active have anything to do with it? – dandavis Commented Nov 18, 2015 at 4:13
• @dandavis I don't think so. I've tried to change to "Debug" or "Release" but it did not help either – David Votrubec Commented Nov 18, 2015 at 7:17

4 Answers 4

It seems that Visual Studio does not support watch mode properly (i.e. incremental compilation):

Just to be clear, --watch does work on Windows if you're using node.js/io.js, but the tsc.exe program distributed with VS does not support it; you still have Compile on Save for similar functionality anyhow.

https://github.com/Microsoft/TypeScript/issues/2375#issuecomment-100812347

I'm not sure why this was closed. Supporting --watch for our tsc.exe host would both be possible and desirable. Right now the limiting factor is that our tsc.exe host is a bit of ugly C++, that uses some ancient COM interfaces for Chakra that we haven't spent much effort on. Our options are: [...]

https://github.com/Microsoft/TypeScript/issues/2375#issuecomment-100949019

As a workaround, could you run

tsc --watch

in the folder where tsconfig.json is located?

Edit: https://github.com/Microsoft/TypeScript/issues/5638 - Visual Studio 2015 compiles ALL typescript files when SINGLE file is changed

Starting with VS 2015 RTM, Compile-on-Save, every time you save a file we need to generate all files in the project to ensure consistent output. We have got numerous issues related to inconsistent output when saving files in different orders. Building all files is the only way we can guarantee correct and consistent output given all the language constructs and how they interact across files (e.g. namespaces/internal modules can be augmented, and that affects the shape of emitted code, also const enms are in lined as constants, etc..).

Try "ECMAScript 5" instead of "ECMAScript 3" in "ECMAScript version

I had a similar issue, but since we were handling TS compilation on our own, I wanted to avoid auto-compilation at all...

The fix was to force the TypeScriptCompileOnSaveEnabled flag to false inside the project:

<PropertyGroup>
    <TypeScriptCompileOnSaveEnabled>false</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>

in my case this effectively stopped VS2015 from automatically compiling the .ts files on save, without VS getting into the way every time and messing up outputs...

Another work around: You could use Gulp to generate your compiled js files and maps. With Gulp you can also create a watch task to compile at a save of a ts file. You can even create clean tasks to clean up the project.

Example of a build task:

var tsProject = ts.createProject(paths.typescriptRoot + 'tsConfig.json'); // use tsconfig.json
    gulp.task("tsbuild", function () {
        var tsResult = tsProject.src()
            .pipe(sourcemaps.init()) // needed to create sourcemaps
            .pipe(ts(tsProject)); // use tsconfig.json
        return tsResult.js
            .pipe(concat(paths.concatTsFileName)) // concat all output files into a sings js files
            .pipe(sourcemaps.write()) // write the sourcemap to be able to debug the ts files
            .pipe(gulp.dest(paths.typescriptOut)); // output the result on specific path
    });

Example of a cleanup task :

gulp.task("clean:tsout", function (cb) {
    rimraf(paths.typescriptOut + paths.concatTsFileName, cb); // rimraf is used to delete a folder
});

gulp.task("clean:scriptjs",
    function () {
        return gulp.src(paths.typescriptJs, { read: false })  // to clean up multiple files we need to use gulp-rimraf
          .pipe(gulpRimraf());
    });

Example of a Watch task:

gulp.task("watch:tsbuild", ['tsbuild'], function () {
    gulp.watch(paths.typescriptRoot + '**/*.ts', ['tbbuild']);
});