如何在 Visual Studio 2012 中包含 TypeScript 文件并编译整个文件？答案

【问题标题】：How to include TypeScript files and compile whole file in Visual Studio 2012?如何在 Visual Studio 2012 中包含 TypeScript 文件并编译整个文件？
【发布时间】：2013-07-08 15:45:41
【问题描述】：

我已经安装了最新版本的 TypeScript 和最新版本的 Web Essentials。我在 VS2012 中新建了一个 TypeScript 项目。

如果有utils.ts:

moduls utils
{
    export function getNumber() {
        return 4;
    }
}

还有一个app.ts：

/// <reference path="utils.ts" />

alert(utils.getNumber().toString());

JavaScript 文件都是单独编译的。但是要让app.js正常工作，显然必须要包含utils.ts的编译源代码。

当我在控制台中运行 tsc app.ts -out app.js 时它确实有效，但我不想每次都手动运行它。

为什么 Web Essentials 不能为我做这些？

【问题讨论】：

标签： visual-studio-2012 typescript web-essentials

【解决方案1】：

我安装了 Web Essentials，因为我喜欢并排编辑，但我使用项目文件中的 TypeScript 编译器来编译单个输出。

详情在这里：http://www.stevefenton.co.uk/Content/Blog/Date/201301/Blog/Getting-The-Right-Set-Up-For-TypeScript/

但是您的项目文件的代码块是：

<Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\$(TypeScriptVersion)\tsc&quot; --out final.js @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

您可能会发现这在您的项目文件中大部分已经存在，您只需要添加 --out 标志。

【讨论】：

感谢您的回复！我按照指示做了，但我在csproj 文件中既没有找到target 标记也没有找到BeforeBuild 属性。
如果它不存在，您可以添加它 - 您还需要检查您是否也有 <TypeScriptCompile Include="app.ts" />。这是在<Content Include="app.js"><DependentUpon>app.ts</DependentUpon></Content> 部分之后。
是否有我必须包含代码的特定位置？我将它添加到根元素<Project>，但它不起作用。
什么是$(PROGRAMFILES) 和%(fullpath)？

【解决方案2】：

我正在为 Web/TypeScript0.9.0.1 使用 VS2012 express，但上述方法不起作用。万一其他人对该设置有此问题，我确实得到了类似的解决方法

在项目属性 -> 构建事件 -> 预构建事件命令行中我添加了："C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --target ES5 $(ProjectDir)app.ts -out $(ProjectDir)Final.js
修改 default.htm 以加载 Final.js 而不是 app.js

【讨论】：