35

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

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

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

一点帮助？

4

8 回答 8

21

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

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

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

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

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

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

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

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

于 2012-10-22T11:26:36.473 回答
15

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

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

我已经从关于将 TypeScript 添加到现有项目的更长的答案中提取了这些简短的注释。

对比 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" />
于 2012-10-12T23:37:26.557 回答
4

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

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

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

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

于 2013-01-22T12:42:49.283 回答
2

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

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

运行： tsc your_input_file.ts --target ES5

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

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

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

于 2012-10-17T01:21:44.120 回答
1

为此，我选中了“自动编译不属于项目的 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 上的打字稿版本 2.1.5

于 2017-05-08T08:02:45.820 回答
0

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

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

于 2013-08-21T16:47:17.107 回答
0

当我尝试在一个 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 类型，我需要在项目中添加三个嵌套文件夹：Scripts\typings\jquery 并添加带有 jQ​​uery 类型定义的 jquery.d.ts 文件。我认为，细节很容易在谷歌上搜索。

感谢我的朋友，他帮助我找到了这个解决方案。 创建项目的第一步

第二步创建项目

于 2017-07-24T11:22:49.003 回答
-2

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

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

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

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

于 2012-10-13T11:35:28.140 回答