How to get Visual Studio 2017 to compile TypeScript on build in class library project (new .net core style .csproj)

Question

Currently running VS 2017 15.3.5 and Typescript 2.5.2 SDK. How do I get TypeScript to compile on build (regular MSBuild). csproj is the new ".net core style" and project type is class library.

Answer 1

here is a description for more build tools including msbuild:

The simpliest way:

1. Right-Click -> Manage NuGet Packages
2. Search for Microsoft.TypeScript.MSBuild
3. Hit Install
4. When install is complete, rebuild!

To be able to build set the tsconfig.json as content in the project.

Answer 2

Since you want to use MSBuild, you can edit the .csproj file as follows (I'm using TypeScript 2.5):

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
  <Exec Command="&quot;C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.5\tsc.exe&quot; -p tsconfig.json" />
</Target>

It's not ideal, because that is a hardcoded path, so I suggest adding C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.5\ to your Path environment variable. then you can just use a cleaner command: Command="tsc.exe -p tsconfig.json".

Entering the command into the post-build (or pre-build if that's what you're looking for) in the properties window of the project produces the same result.

Answer 3

Before seeing the two good answers here this is what I tried:

First tried adding some parts of .csproj that I found referenced when googling and looking at the "old" csproj file (before converting to the new VS2017/.net core style)

  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

When I closed the solution and re-opened I was presented with a question about TypeScript version for the project was set to 2.3, but 2.5 was available and if I wanted to upgrade the project. I answered yes. Now I got the TypeScript Build Tab in project properties which correctly recognized the tsconfig.json file.

I was hoping that compile on build would noW work, but it didn't.

I also added:

    <TypeScriptToolsVersion>2.5</TypeScriptToolsVersion>

to the first PropertyGroup in .csproj file. This didn't really do anything either.

Then tried adding:

<ItemGroup>
  <TypeScriptCompile Include="src\sourcefile.ts" />
</ItemGroup>

with TypeScriptCompile elements for all the files to compile. No luck.

Since I already had Gulp set up in the project (and MSBuild was actually used from Gulp to compile the typescript) I decided to switch from MSBuild called from Gulp to using NPM modules "typescript" and "gulp-typescript" in a Gulp task instead:

REMOVED:

gulp.task("Build", function () {
return gulp.src('./' + packageName + '.csproj')
    .pipe(msbuild(
        {
            stderr: true,
            stdout: true,
            toolsVersion: 15.0
        }));
});

ADDED:

var tsProject;
gulp.task("CompileTypeScript", ['NameOfAnotherTaskThatThisTaskDependsOn'], function () {
  var ts = require("gulp-typescript");

  if (!tsProject) {
      tsProject = ts.createProject("tsconfig.json");
  }

  var reporter = ts.reporter.fullReporter();
  var tsResult = tsProject.src()
    .pipe(tsProject(reporter));

  return tsResult.js
    .pipe(gulp.dest(""));
});

Then I bound the "CompileTypeScript" Gulp task to Before Build in Visual Studio. Works fine, although I would like to know if this is possible to get to work with the new csproj format as well.

Thanks for good suggestions @Balah and @Joshit, they probably work just fine as well.

EDIT 8.february 2018: Fixed some typos and corrected name of dependent gulp task (was the same name as the task, which doesnt work of course)

For more info, see this article

Answer 4

If you´ve installed WebEssentials plugin, you´ll find several options under Tools -> Options. I think the default setting is Compile on save. But you can set this option to false and set Compile on build to true.

Hope thats what you looking for.