如何让Visual Studio 2017在类库项目中构建TypeScript（新的.net核心样式.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

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 2

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 3

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 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.