在现有的 Visual Studio 网站项目中使用 TypeScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12867390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using TypeScript in an existing Visual Studio Web Site project
提问by Josh
I've got an existing Visual Studio project that was setup as a "Web Site" project. You can create projects like this by going to File->New Web Site. This is a different project type than a "Web Application Project".
我有一个现有的 Visual Studio 项目，它被设置为“网站”项目。您可以通过转到 File->New Web Site 来创建这样的项目。这是与“Web 应用程序项目”不同的项目类型。
I'd like to mix in some TypeScript on this project. However, I can't figure out how to instruct Visual Studio to "build" my .ts files and generate .js files. I've got the VS2012 TypeScript plugin, and I'm able to a create a TypeScript project, as outlined here. That project works fine, but that's more along the lines of a "Web Application Project". It's a different project type than a "Web Site Project".
我想在这个项目中加入一些 TypeScript。但是，我不知道如何指示 Visual Studio“构建”我的 .ts 文件并生成 .js 文件。我有 VS2012 TypeScript 插件，我可以创建一个 TypeScript 项目，如下所述。该项目运行良好，但这更像是“Web 应用程序项目”。它是一种不同于“网站项目”的项目类型。
Also, when I create .ts file, inside that file the editor gives me TypeScript syntax highlighting and intellisense. But again, I can't figure out how to get it to compile the TypeScript to JavaScript.
此外，当我创建 .ts 文件时，在该文件中，编辑器会为我提供 TypeScript 语法突出显示和智能感知。但同样，我不知道如何让它将 TypeScript 编译为 JavaScript。
A little help?
一点帮助？
采纳答案by Josh
Visual Studio now supports "compile on save" for TypeScript files. I'm using Visual Studio 2013 Update 2, and I can turn this on in a Web Site project by going to Tools -> Options -> Text Editor -> TypeScript -> Project, and checking the box "Automatically compile TypeScript files which are not part of a project." I don't know why it's labeled like this, because it is clearly compiling files which arepart of my project...
Visual Studio 现在支持 TypeScript 文件的“保存时编译”。我正在使用 Visual Studio 2013 Update 2，我可以通过转到工具 -> 选项 -> 文本编辑器 -> TypeScript -> 项目，并选中“自动编译 TypeScript 文件不是项目的一部分。” 我不知道为什么它标记这个样子，因为它显然是编译哪些文件是我的项目的一部分...
Many of the other answers to this are not applicable to Web Site Projects, because you can't hook into the build process. With a Web Site Project, there is no csproj or vbproj file, as the build is handled by IIS, not Visual Studio.
对此的许多其他答案不适用于网站项目，因为您无法连接到构建过程。对于网站项目，没有 csproj 或 vbproj 文件，因为构建是由 IIS 处理的，而不是 Visual Studio。
If you're using a Web Site Project, and "compile on save" doesn't work for you, there are only a few alternatives:
如果您使用的是网站项目，并且“保存时编译”对您不起作用，那么只有几种选择：
1) Use the command line TSC compiler to manually compile your code.
1) 使用命令行 TSC 编译器手动编译您的代码。
2) Create a custom tool for manually compiling your files. You can configure this for use in Visual Studio.
2) 创建用于手动编译文件的自定义工具。您可以配置它以在 Visual Studio 中使用。
3) Create an "on-demand compilation" .aspx page that will compile the TypeScript and return it as JavaScript.
3) 创建一个“按需编译”.aspx 页面，该页面将编译 TypeScript 并将其作为 JavaScript 返回。
4) Use the TypeScript CompileJavaScript project to automatically your code in the browser. This gives you the "on-demand compilation" that normally comes with Web Site Projects.
4) 使用TypeScript CompileJavaScript 项目在浏览器中自动生成您的代码。这为您提供了通常随网站项目一起提供的“按需编译”。
Before "compile on save" was working in VS, I was using the TypeScript Compile. Now I'm happily using "compile on save."
在“保存时编译”在 VS 中工作之前，我使用的是 TypeScript 编译。现在我很高兴使用“保存时编译”。
回答by Fenton
This one has been a bit of a moving target - but only because the TypeScript team have been improving how it all works. I have tried to cover as many scenarios as possible below, from the newest to the oldest.
这个目标有点移动——但这只是因为 TypeScript 团队一直在改进它的工作方式。我试图在下面涵盖尽可能多的场景，从最新到最旧。
The very latest on this is that this should now work in the latest versions of Visual Studio (currently v1.4) even for web projects.
最新消息是，即使对于 Web 项目，它现在也可以在最新版本的 Visual Studio（当前 v1.4）中使用。
I have taken these abbreviated notes from my much longer answer about adding TypeScript to an existing project.
我从关于将 TypeScript 添加到现有项目的更长的答案中提取了这些简短的注释。
VS 2013 / 0.9.5
VS 2013 / 0.9.5
If you are using the Visual Studio Extension for 0.9.5 or better along with Visual Studio 2013 you should find that it will automatically configure everything as soon as you add the first TypeScript file.
如果您将 Visual Studio Extension for 0.9.5 或更高版本与 Visual Studio 2013 一起使用，您会发现它会在您添加第一个 TypeScript 文件后立即自动配置所有内容。
Auto TypeScript-isation didn't work?
自动打字稿化不起作用？
The automatic config only adds a few lines - you could do that manually:
自动配置仅添加几行 - 您可以手动执行此操作：
<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
VS 2012 / 0.9.x
The following project file configuration should work:
以下项目文件配置应该可以工作：
<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')" />
Even older set up?
更旧的设置？
I have found the most reliable way to add TypeScript to an existing project is to add the following to the project file:
我发现将 TypeScript 添加到现有项目的最可靠方法是将以下内容添加到项目文件中：
<ItemGroup>
<AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript <Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript"C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts
.8.0.0\tsc" --module amd @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
.8.0.0\tsc" @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
You can add optional flags here too - such as --module amd:
您也可以在此处添加可选标志 - 例如--module amd：
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"alwaysStrict": true,
"module": "amd"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot",
"packages"
]
}
回答by Mark Rendle
As of version 0.8.2, released 21-Jan-2013, the VS2012 TypeScript plug-in supports compile-on-save without using WebEssentials. Go to Tools > Options > Text Editor > TypeScript > Project section and check the "Automatically compile..." box.
从 2013 年 1 月 21 日发布的 0.8.2 版本开始，VS2012 TypeScript 插件支持不使用 WebEssentials 的 compile-on-save。转到“工具”>“选项”>“文本编辑器”>“TypeScript”>“项目”部分，然后选中“自动编译...”框。
If you want to compile all your .ts files into a single .js file as part of your build process (which you probably should), then make sure the app.ts script has <reference>s to all the files that should be included, and add the following pre-build step to your project:
如果您想将所有 .ts 文件编译为单个 .js 文件作为构建过程的一部分（您可能应该这样做），请确保 app.ts 脚本对应包含的所有文件具有 <reference> s ，并将以下预构建步骤添加到您的项目中：
##代码##(Specifying the --out parameter tells tsc to include all referenced files.)
（指定 --out 参数会告诉 tsc 包含所有引用的文件。）
回答by saille
Since there's no project file, you may have to revert to "manually" running the TypeScript compiler.
由于没有项目文件，您可能必须恢复到“手动”运行 TypeScript 编译器。
Open a Visual Studio Command Prompt (Start -> Programs -> Microsoft Visual Studio 20xx -> Visual Studio Tools -> Developer Command Prompt).
打开 Visual Studio 命令提示符（开始 -> 程序 -> Microsoft Visual Studio 20xx -> Visual Studio 工具 -> 开发人员命令提示符）。
Run: tsc your_input_file.ts --target ES5
运行：tsc your_input_file.ts --target ES5
To supply multiple .ts files, use a text file with the @args_file_name parameter.
要提供多个 .ts 文件，请使用带有 @args_file_name 参数的文本文件。
When you get tired of that, put it all in a batch file.
当你厌倦了，把它全部放在一个批处理文件中。
When you get tired of using a batch file, convert your app to a Web Application and alter the .proj file as per Sohnee's answer.
当您厌倦了使用批处理文件时，请将您的应用程序转换为 Web 应用程序并根据 Sohnee 的回答更改 .proj 文件。
回答by Ashraf Sabry
For this to work on my setup, I have the "Automatically compile TypeScript files which are not part of a project" checkbox checked.
为此，我选中了“自动编译不属于项目一部分的 TypeScript 文件”复选框。
But this wasn't enough. For automatic compilation to work in a website project, I had to create a tsconfig.json file with the following configurations:
但这还不够。为了在网站项目中自动编译工作，我必须使用以下配置创建一个 tsconfig.json 文件：
##代码##The "compileOnSave": truesetting is the crucial one here. It's what triggers automatic compilation.
该"compileOnSave": true设置是这里的关键之一。这就是触发自动编译的原因。
Typescript version 2.1.5 on Visual Studio 2017
Visual Studio 2017 上的打字稿版本 2.1.5
回答by S.H.
I read posts above when I try to use *.aspx and *.ts files in one VS-2015 project. Unintentionally I found simple and clear recipe "How to combine *.ASPX and *.TS code files in one Visual Studio project" ans I want to share this solution for all. Excuse me if it's too easy.
当我尝试在一个 VS-2015 项目中使用 *.aspx 和 *.ts 文件时，我阅读了上面的帖子。我无意中找到了简单明了的秘诀“如何在一个 Visual Studio 项目中组合 *.ASPX 和 *.TS 代码文件”，我想与所有人分享这个解决方案。如果太容易了，请见谅。
For using *.aspx and *.ts files in one VS - project, create new project of type "ASP.NET Web Application". Then, on next step, select "Empty" in top "ASP.NET 4.5.2 Templates" pane and "Web Forms" and "Web API" in bottom "Add folders and core references for:" pane. I add two pictures with this steps.
要在一个 VS 项目中使用 *.aspx 和 *.ts 文件，请创建“ASP.NET Web 应用程序”类型的新项目。然后，在下一步中，在顶部“ASP.NET 4.5.2 模板”窗格中选择“空”，在底部“添加文件夹和核心引用：”窗格中选择“Web 窗体”和“Web API”。我用这个步骤添加了两张图片。
Also, I have a script error when I using variables of JQuery type in my TypeScript code. For using JQuery type I need add three nested folders in project: Scripts\typings\jquery and add jquery.d.ts file with type definitions for jQuery. I think, details are easy to googling.
另外，当我在 TypeScript 代码中使用 JQuery 类型的变量时出现脚本错误。为了使用 JQuery 类型，我需要在项目中添加三个嵌套文件夹：Scripts\typings\jquery 并添加带有 jQuery 类型定义的 jquery.d.ts 文件。我认为，细节很容易在谷歌上搜索。
Thank you for my friend, who help me to found this solution. first step of creation project
感谢我的朋友，他帮助我找到了这个解决方案。 创建项目的第一步
回答by SergioMSCosta
Josh, I am using Visual Studio 2012 Express for Web and what I've realized is that every time you save the .ts file, it automatically generates the .js.
Josh，我使用的是 Visual Studio 2012 Express for Web，我意识到每次保存 .ts 文件时，它都会自动生成 .js。
Check your .ts folder each time you save a file and confirm if this is not happening to you too.
每次保存文件时检查您的 .ts 文件夹并确认这是否也发生在您身上。
回答by Arek Bal
Check if your .ts files in properties are associated with TypeScriptCompiler.
检查属性中的 .ts 文件是否与 TypeScriptCompiler 相关联。
Keep in mind that opening a .ts file in VS into so called virtual project is not the same as having a reference to file in VS web project. First one will not let you set build action on it. While another one will.
请记住，在 VS 中将 .ts 文件打开到所谓的虚拟项目中与在 VS web 项目中引用文件不同。第一个不会让您对其设置构建操作。而另一个会。
PS. Get Web Essentials VS add-on to get transformations on file save, texteditor ts/js split and built-in minimizer.
附注。获取 Web Essentials VS 附加组件以获取文件保存、文本编辑器 ts/js 拆分和内置最小化器的转换。
Edit: Yeah, I didn't notice there is no such build action available with other projects at start... But hey, I pushed Sohne into right direction.
编辑：是的，我没有注意到其他项目在开始时没有这样的构建操作......但是，嘿，我把 Sohne 推向了正确的方向。
