在Visual Studio中创建一个新的TypeScript项目。

62

我该如何在Visual Studio中开始编写TypeScript项目?创建新项目时没有选项。我已安装了Visual Studio 2012以及TypeScript插件。

10个回答

45
我找到了解决方案:手动安装VS扩展程序
某种程度上,VS扩展程序未能成功安装。您可以手动进行安装。在 C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0 目录下有一个称为 TypeScriptLanguageService.vsix.vsix 文件。尝试运行此文件。它应该会安装TypeScript扩展程序。
如果您使用的是基于x86的系统,请尝试查看 C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0 目录。
对我有用。现在我可以创建TypeScript项目并将其列在Visual Studio扩展程序列表中。
请注意,较新版本的TypeScript已经删除了 0.8.0.0 文件夹。您可能会在 C:\Program Files (x86)\Microsoft SDKs\TypeScript 目录下找到 .vsix 文件。

那个修复方法对我也有效,在Win 7 x64,VS 2012 Ultimate上。不过必须使用“搜索已安装模板”功能才能找到它(可能是我没看到或需要重新启动)。 - Christopher Cook
我也曾在Win 7 32位上使用VS 2012 Ultimate时遇到了同样的问题。感谢您提供的解决方案。 - Matt Burland
1
我在列出的目录中找不到vsix文件。有人可以分享一下吗? - Chui Tey
我在使用VS 2012 Ultimate x64时也遇到了同样的问题。vsix文件位于C:\Program Files (x86)\Microsoft SDKs\TypeScript\(其中没有0.8.0.0文件夹)。 - Paul Oliver
请注意,只有0.8.0 msi文件包含VSIX文件。您需要先运行0.8.0安装程序,然后再运行最新版本(对我来说是0.8.3)。我无需运行中间版本(0.8.1和0.8.2)。 - Brad Irby

20

您可以使用“添加新项”对话框将TypeScript文件添加到现有项目中。

输入图像描述

您还可以使用“添加新项目”对话框创建一个TypeScript HTML应用程序类型的项目。此项目类型位于已安装->(模板)->Visual C#下。

输入图像描述

如果在Visual Studio中缺少这些选项,则应尝试重新安装TypeScript Visual Studio插件


йҷӨдәҶжҲ‘е®үиЈ…VSж—¶е°ұжңүзҡ„Windows Library for JavaScriptд№ӢеӨ–пјҢдёҺTypeScriptж— е…ігҖӮ жӯӨеӨ–пјҢеҰӮжһңжҲ‘еңЁVSдёӯжү“ејҖдёҖдёӘ.tsж–Ү件пјҢжІЎжңүиҜӯжі•й«ҳдә®е’ҢжҷәиғҪж„ҹзҹҘгҖӮдјјд№Һе®Ңе…ЁжІЎжңүTSгҖӮ - nikeee
我刚找到了一个对我有效的解决方案,请看看我的答案。 - nikeee
谢谢提供截图,这对于找到带有TypeScript的HTML项目的路径非常有帮助。 - Tatiana Racheva
注意:对于许多人来说,“添加新文件”对话框中不会显示文件扩展名。如果发生这种情况,您可能需要重新安装文件扩展名,可以在此处找到:C:\ Program Files \ Microsoft SDKs \ TypeScript \ 0.8.0.0 - Arrow
如果我没有找到这个帖子,我可能已经放弃了TypeScript。 对我有用的是在搜索框中输入“Typescript”。我发誓我在列表中找不到它。 这就是一个8GB的应用程序。 - toto
显示剩余3条评论

16

如果您使用的是Visual Studio 2017,模板“HTML Application with TypeScript”已从模板中删除。

但是,您可以安装rich-newman在Github上创建的扩展程序:https://github.com/rich-newman/typescript-html-application-vs2017-template

要安装它,请执行以下操作:

  • 进入“添加新项目”窗口
  • 在左侧树形视图中选择“在线”
  • 搜索“TypeScript HTML Application Template” enter image description here
  • 安装该扩展程序,然后该模板应该在“已安装-->TypeScript”下可用

1
要使用它,您还需要安装IISexpress。 - Pierre Poliakoff
2
我最终也使用了这种方法。但是我仍在思考:为什么我们没有任何“纯”TypeScript项目,只需生成JavaScript文件即可在任何Web项目中使用。所有常见对象都将在一个项目中。我还可以找到并使用工具,将C#模型转换为TypeScript,从而自动生成模型部分。我还可以使用部分来向模型添加方法,以便我可以从Angular控制器调用它们,从而确保功能存在于最相关的类中。我错过了什么吗? - Vyas Bharghava

13

在安装了TypeScriptSetup.0.8.0.msi并在Win7 64位系统上使用VS 2010后,按照其他答案所述找不到TypeScriptLanguageService.vsix插件。

要在VS 2010上安装,请使用7zip打开上述msi文件,提取“TypeScriptLS.vsix_File”,删除结尾的“_File”,然后像平常一样运行即可。

这将提供一个新的TypeScript项目模板(但神奇的是没有文件模板),智能感知、代码高亮等功能。


另外,TypeScript项目模板在哪里? - Rick Love
@RickLove 创建一个新的 Visual C# 模板 - “具有TypeScript的HTML应用程序”。编译ts成功了吗? - Karl Glennon
@RickLove 当你提取 .msi 文件时,会有一个 tsc.exe,如果你使用的是 Windows 7 或 8,则可以使用它来编译你的 ts 文件。然而,我使用的是 Windows XP,无法使用这个 exe,它会出现错误:“在动态链接库 msvct.dll 中找不到 _except_handler4_common 过程入口点”。有什么想法吗? - Karl Glennon
我正在使用tsc.exe:我创建了一个控制台应用程序来运行它。我正在使用Windows 7。对于Windows XP没有任何想法。 - Rick Love
2
嗨Rick,tsc.exe在XP上无法工作,但是对于其他人看到这个问题的人,您可以使用Windows脚本主机编译您的TypeScript,方法如下: cscript path/to/tsc.js source-file.ts您可以在TypeScriptLanguageService.vsix的cab文件中找到tsc.js。 - Karl Glennon
@Recursieve非常感谢你的洞察力!我需要在运行时动态编译一些 TypeScript 代码,而且这个客户端机器使用的是 XP 系统,你的解决方案真的帮了我大忙。 - devshorts

1

我没有项目和ts文件模板,尝试重新安装(只需运行vsix文件),但这并没有帮助,所以我: 1. 从VS2012管理器中卸载了扩展 2. 关闭了VS2012,然后再次安装,神奇地出现了项目和文件模板。谢天谢地,它起作用了- 我可以开始使用语言而不必每次手动运行转换。


0

旧帖,新建议:

我在Win8/VS2012上花了几个小时解决这个问题。经过多次安装/重新安装(Typescript插件v0.8.3),唯一有效的方法是以管理员模式运行VS2012并(重新)安装Web Essentials 2012。这对我有用,我在添加新项目...中得到了Typescript作为自己的部分(以及上面提到的所有其他好处)。

让我想起了更新文档(如果您想在本地安装文档)的过程,它也有一个令人烦恼的加密错误。以管理员模式运行也是答案。

您不必始终以管理员模式运行,但在更新IDE本身(新插件等)时可能是一个好习惯。


0

另一个提示 - 你需要安装 Visual Studio for Web。仅安装 VS for Desktop 是不行的。此外,你需要在安装完 VS 后再安装插件,所以如果你先安装了插件,请先卸载它,然后重新安装。


0

0

安装 TypeScript 会添加一个新的项目类型,以及为现有项目添加文件类型。安装 TypeScript 后,您可以尝试在新项目窗口中搜索“typescript”。它会向我展示“使用 TypeScript 的 HTML 应用程序”。

每个 .ts 文件都会添加一个依赖的 .js 文件。

希望这能帮到您!


0

我也花了好几天时间解决这个问题。最终找到了这个(非常老的)答案,但并没有太大帮助。我使用的是VS 2022,在“扩展/管理扩展”下搜索Typescript,找到了“Typescript HTML应用程序模板”,下载后从中创建项目,设置起始页,一切似乎都正常工作了 :-)

添加tsconfig.json文件也很简单。(不要忘记在“lib”行中加入“dom”:我的是“lib”:[“es6”,“dom”],


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接