【问题标题】：Using TypeScript in an existing Visual Studio Web Site project在现有的 Visual Studio 网站项目中使用 TypeScript
【发布时间】：2012-10-03 18:14:57
【问题描述】：

我有一个现有的 Visual Studio 项目，它被设置为“网站”项目。您可以通过转到 File->New Web Site 来创建这样的项目。这是与“Web 应用程序项目”不同的项目类型。

我想在这个项目中加入一些 TypeScript。但是，我不知道如何指示 Visual Studio“构建”我的 .ts 文件并生成 .js 文件。我有 VS2012 TypeScript 插件，我可以创建一个 TypeScript 项目，如outlined here。该项目运行良好，但这更像是“Web 应用程序项目”。这是与“网站项目”不同的项目类型。

此外，当我创建 .ts 文件时，在该文件中，编辑器会为我提供 TypeScript 语法突出显示和智能感知。但同样，我不知道如何让它将 TypeScript 编译为 JavaScript。

有点帮助？

【问题讨论】：

stackoverflow.com/questions/12680486/…也有相关信息
这应该与上面的问题合并。这个问题有一个非常好的答案，如果让它浪费了，那就太可惜了。不过，另一个问题的票数更多。
ASP.NET MVC 应用程序将成为“Web 应用程序项目”，而不是“网站项目”。在我的问题中，我问的是后者，而不是前者；在@Jedidja 参考的问题中，提问者询问的是后者，而不是前者。它们是相关但不同的问题。一个好的编辑当然可以弄清楚如何合并，同时保留两个问题的所有细节。

标签： visual-studio-2012 typescript

【解决方案1】：

这个目标有点移动 - 但这只是因为 TypeScript 团队一直在改进它的工作方式。我试图在下面涵盖尽可能多的场景，从最新到最旧。

最新情况是，它现在应该可以在最新版本的 Visual Studio（当前为 v1.4）中运行，即使对于 Web 项目也是如此。

我从我关于adding TypeScript to an existing project 的更长回答中摘录了这些简短的笔记。

VS 2013 / 0.9.5

如果您将 Visual Studio Extension for 0.9.5 或更高版本与 Visual Studio 2013 一起使用，您会发现它会在您添加第一个 TypeScript 文件后立即自动配置所有内容。

自动 TypeScript 化不起作用？

自动配置只添加了几行 - 您可以手动完成：

  <ItemGroup>
    <TypeScriptCompile Include="Scripts\app.ts" />
  </ItemGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

VS 2012 / 0.9.x

以下项目文件配置应该可以工作：

  <ItemGroup>
    <TypeScriptCompile Include="app.ts" />
  </ItemGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets')" />

甚至更旧的设置？

我发现将 TypeScript 添加到现有项目的最可靠方法是将以下内容添加到项目文件中：

<ItemGroup>
    <AvailableItemName Include="TypeScriptCompile" />
 </ItemGroup>
 <ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
 </ItemGroup>
 <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot;  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

您也可以在此处添加可选标志 - 例如--module amd：

    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; --module amd  @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />

【讨论】：

我所知道的网站项目的唯一配置文件是 web.config。你指的是这个吗？如果是这样，这个 XML sn-p 在 web.config 中的什么位置？如果不是，我需要将其添加到的“项目文件”在哪里，该文件在哪里？谢谢！
@JoshuaBeall 项目文件是.csproj 文件。如果您拉起上下文菜单，则可以选择Unload Project。完成此操作后，您可以再次拉出上下文菜单来编辑项目文件（这只是底层的 XML）。完成后，将返回到Reload Project 的上下文菜单。
这个 .csproj 文件在哪里？它不在我的网站项目的根目录中。正如我所提到的，我知道的唯一配置文件是 web.config 文件。 Visual Studio 是否将 .csproj 文件放在其他文件夹中？如果有，在哪里？
根据this，网站项目“没有项目文件（.csproj 或 .vbproj）。文件夹结构中的所有文件都自动包含在网站中。”
@MrGrok - 是的 - 我从我正在做的一个项目中得到这个。 target ES5 是覆盖 ES3 的默认值 - 如果您不担心 IE8 及更低版本并且需要使用 getter 和 setter，您唯一会使用它。

【解决方案2】：

检查属性中的 .ts 文件是否与 TypeScriptCompiler 关联。

请记住，在 VS 中将 .ts 文件打开到所谓的虚拟项目中与在 VS Web 项目中引用文件不同。第一个不允许您对其设置构建操作。而另一个会。

PS。获取 Web Essentials VS 插件以获取文件保存、文本编辑器 ts/js 拆分和内置最小化器的转换。

编辑：是的，一开始我没有注意到其他项目没有这样的构建操作......但是，嘿，我把 Sohne 推向了正确的方向。

【讨论】：

即使使用 Web Essentials，TypeScript 大部分时间都无法编译。

【解决方案3】：

由于没有项目文件，您可能必须恢复为“手动”运行 TypeScript 编译器。

打开 Visual Studio 命令提示符（开始 -> 程序 -> Microsoft Visual Studio 20xx -> Visual Studio 工具 -> 开发人员命令提示符）。

运行：tsc your_input_file.ts --target ES5

要提供多个 .ts 文件，请使用带有 @args_file_name 参数的文本文件。

当你厌倦了，把它全部放在一个批处理文件中。

当您厌倦了使用批处理文件时，将您的应用程序转换为 Web 应用程序并按照 Sohnee 的回答更改 .proj 文件。

【讨论】：

【解决方案4】：

Visual Studio 现在支持 TypeScript 文件的“保存时编译”。我正在使用 Visual Studio 2013 Update 2，我可以在网站项目中打开它，方法是转到工具 -> 选项 -> 文本编辑器 -> TypeScript -> 项目，然后选中“自动编译 TypeScript 文件不是项目的一部分。”我不知道为什么它被这样标记，因为它显然是在编译我的项目中是一部分的文件......

对此的许多其他答案不适用于网站项目，因为您无法参与构建过程。对于网站项目，有no csproj or vbproj file，因为构建是由 IIS 处理的，而不是 Visual Studio。

如果您使用的是网站项目，并且“保存时编译”对您不起作用，那么只有几种选择：

1) 使用命令行 TSC 编译器手动编译您的代码。

2) 创建用于手动编译文件的自定义工具。您可以将其配置为在 Visual Studio 中使用。

3) 创建一个“按需编译”.aspx 页面，该页面将编译 TypeScript 并将其作为 JavaScript 返回。

4) 使用TypeScript Compile JavaScript 项目在浏览器中自动执行您的代码。这为您提供了网站项目通常附带的“按需编译”。

在 VS 中使用“保存时编译”之前，我使用的是 TypeScript Compile。现在我很高兴地使用“保存时编译”。

【讨论】：

@Steve Fenton 下面的回答真的很有用。
@Arrow，自从您在 2012 年发表评论以来，情况有所改善。我更新了我的答案，以澄清编译现在是自动进行的。
我可以设置“保存时编译”，但主要问题是我在“添加新...”对话框中看不到“添加 Typescript 文件”选项。有什么我需要补充的吗？在项目类型网站中没有问题。谢谢。

【解决方案5】：

从 2013 年 1 月 21 日发布的 0.8.2 版开始，VS2012 TypeScript 插件支持在不使用 WebEssentials 的情况下进行保存时编译。转到工具 > 选项 > 文本编辑器 > TypeScript > 项目部分并选中“自动编译...”框。

如果您想将所有 .ts 文件编译成单个 .js 文件作为构建过程的一部分（您可能应该这样做），那么请确保 app.ts 脚本包含所有文件的应该包括在内，并将以下预构建步骤添加到您的项目中：

"C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts

（指定 --out 参数告诉 tsc 包含所有引用的文件。）

【讨论】：

对我来说，它位于 TypeScript 文件夹内的 v1 文件夹内。如果版本发生变化，整合起来很糟糕。有没有办法解决这个问题？
在将其打字稿文件引用为TypeScriptCompile的VS项目中，您可以通过定义相对于项目目录的属性TypeScriptOutFile来强制编译为单个文件

【解决方案6】：

Josh，我正在使用 Visual Studio 2012 Express for Web，我发现每次保存 .ts 文件时，它都会自动生成 .js。

每次保存文件时检查您的 .ts 文件夹，并确认您是否也没有发生这种情况。

【讨论】：

现在是，但我在 2012 年发布我的问题时还不是。进展！

【解决方案7】：

为了在我的设置上工作，我选中了“自动编译不属于项目的 TypeScript 文件”复选框。

但这还不够。为了在网站项目中进行自动编译，我必须创建一个具有以下配置的 tsconfig.json 文件：

{
"compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "alwaysStrict": true,
    "module": "amd"
},
"compileOnSave": true,
"exclude": [
    "node_modules",
    "wwwroot",
    "packages"
]
}

"compileOnSave": true 设置是这里的关键。这是触发自动编译的原因。

Visual Studio 2017 上的 Typescript 2.1.5 版

【讨论】：

【解决方案8】：

当我尝试在一个 VS-2015 项目中使用 *.aspx 和 *.ts 文件时，我阅读了上面的帖子。无意中我找到了简单明了的配方“如何在一个 Visual Studio 项目中组合 *.ASPX 和 *.TS 代码文件”，我想与所有人分享这个解决方案。如果太简单了，请见谅。

要在一个 VS - 项目中使用 *.aspx 和 *.ts 文件，请创建类型为“ASP.NET Web 应用程序”的新项目。然后，在下一步中，在顶部的“ASP.NET 4.5.2 模板”窗格中选择“空”，在底部的“添加文件夹和核心引用：”窗格中选择“Web 表单”和“Web API”。我用这个步骤添加了两张图片。

另外，当我在我的 TypeScript 代码中使用 JQuery 类型的变量时，我遇到了脚本错误。为了使用 JQuery 类型，我需要在项目中添加三个嵌套文件夹：脚本\打字\jquery 并添加带有 jQuery 类型定义的 jquery.d.ts 文件。我认为，细节很容易在谷歌上搜索。

感谢我的朋友帮助我找到了这个解决方案。 first step of creation project

second step of creation project

【讨论】：