在现有Visual Studio网站项目中使用TypeScript

Question

我有一个现有的Visual Studio项目,它被设置为"Web站点"项目.您可以通过转到文件 - >新建网站来创建这样的项目.这是一种与"Web应用程序项目"不同的项目类型.

我想在这个项目中混合一些TypeScript.但是,我无法弄清楚如何指示Visual Studio"构建"我的.ts文件并生成.js文件.我有VS2012 TypeScript插件,我可以创建一个TypeScript项目,如此处所述.该项目工作正常,但更像是"Web应用程序项目".它与"网站项目"不同,是一种不同的项目类型.

此外,当我创建.ts文件时,在该文件中,编辑器为我提供了TypeScript语法高亮和智能感知.但同样,我无法弄清楚如何将TypeScript编译为JavaScript.

一点帮助？

Answer 1

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

许多其他答案都不适用于网站项目,因为您无法挂钩构建过程.使用Web站点项目,没有csproj或vbproj文件,因为构建由IIS而不是Visual Studio处理.

如果您正在使用网站项目,并且"保存时编译"不适合您,则只有几个选择:

1)使用命令行TSC编译器手动编译代码.

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

3)创建一个"按需编译".aspx页面,它将编译TypeScript并将其作为JavaScript返回.

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

在"编译保存"之前,VS正在使用TypeScript Compile.现在我很高兴使用"编译保存".

Answer 2

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

最新的一点是,即使对于Web项目,这应该适用于最新版本的Visual Studio(目前为v1.4).

我从关于将TypeScript添加到现有项目的更长时间的答案中获取了这些缩写注释.

VS 2013/0.9.5

如果您使用Visual Studio Extension for 0.9.5或更高版本以及Visual Studio 2013,您会发现它会在您添加第一个TypeScript文件后自动配置所有内容.

自动TypeScript-isation不起作用？

自动配置只添加几行 - 您可以手动执行:

  <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" />