Visual Studio 2019添加site.ts与Microsoft.TypeScript.MSBuild后构建报错

原因说明 #

冲突本质是VS内置的「保存时TS编译」和Microsoft.TypeScript.MSBuild触发的「全局构建TS校验」走的是两套独立逻辑，未配置tsconfig.json时MSBuild会启用默认严格校验规则，同时扫描所有目录下的TS文件（包括node_modules等无需校验的目录），因此会抛出大量无关错误。

方案一：保留Microsoft.TypeScript.MSBuild包 #

• 在项目根目录新增tsconfig.json文件，覆盖MSBuild默认编译规则，基础配置参考：

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext",
    "outDir": "./Scripts",
    "skipLibCheck": true,
    "strict": false
  },
  "include": ["./src/ts/**/*"],
  "exclude": ["node_modules", "bin", "obj"]
}

注意修改include和outDir路径匹配你实际的项目文件结构

• 右键项目 → 「属性」→「TypeScript生成」，确认配置项和tsconfig.json保持一致，勾选「将TypeScript编译为生成操作的一部分」
• 卸载项目编辑.csproj文件，添加配置项<TypeScriptCompileBlocked>false</TypeScriptCompileBlocked>，删除其他重复的TypeScript相关MSBuild配置
• 清理解决方案，删除bin、obj文件夹后重新构建即可

方案二：使用现有gulp流程处理TS编译 #

• 卸载NuGet包Microsoft.TypeScript.MSBuild，编辑.csproj文件添加配置项<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>，禁用VS内置的TS编译逻辑
• 项目本地安装依赖：npm install typescript gulp-typescript --save-dev
• 在gulpfile.js中新增TS编译和监听任务，参考代码：

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');

gulp.task('compile-ts', function () {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest('./Scripts'));
});

gulp.task('watch-ts', function () {
  gulp.watch('./src/ts/**/*.ts', gulp.series('compile-ts'));
});

gulp.task('default', gulp.series('compile-ts', 'watch-ts'));

• 右键项目 → 「属性」→「生成事件」→「预先生成事件命令行」，填入npx gulp compile-ts，即可在解决方案构建时自动触发TS编译
• 开发阶段执行gulp watch-ts即可实现TS文件保存后自动编译为JS

内容的提问来源于stack exchange，提问作者mortenma71