typescript Visual Studio 2017 的打字稿支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43149606/
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
Typescript Support for Visual Studio 2017
提问by Ayo Adesina
I have recently been trying to learn TypeScript, and in some of the videos I have been watching after installing the 'Web Essentials' extension when working with a .ts file visual studio gives you a pre-view panel so you can see the JavaScript as you type.
我最近一直在尝试学习 TypeScript，在使用 .ts 文件时安装“Web Essentials”扩展后我一直在观看的一些视频中，visual studio 为您提供了一个预览面板，因此您可以将 JavaScript 视为你打字。
These videos seem to be using VS 2012.
这些视频似乎使用的是 VS 2012。
However installing Web Essentials on VS 2017 doesn't seem to have this option, does anyone know how I can get this to work in VS 2017? Does it have the same support for TypeScript?
然而，在 VS 2017 上安装 Web Essentials 似乎没有这个选项，有谁知道我如何让它在 VS 2017 中工作？它对 TypeScript 有相同的支持吗？
回答by Matt
So TypeScript is installed by default with VS2017 (Update 2 will give you the latest version of 2.3 and allow side by side installs). If you don't have it you can add it via the Visual Studio Installer - from the installer click the burger menu and choose Modify, then click Individual Components and under SDKs, Libraries and Frameworks you can add TypeScript.
因此，VS2017 默认安装 TypeScript（更新 2 将为您提供最新版本的 2.3 并允许并行安装）。如果您没有它，您可以通过 Visual Studio 安装程序添加它 - 从安装程序中单击汉堡菜单并选择修改，然后单击单个组件，然后在 SDK、库和框架下您可以添加 TypeScript。
Once installed you can add a tsconfig.json file to tell the TypeScript compiler how to behave, example here:
安装后，您可以添加一个 tsconfig.json 文件来告诉 TypeScript 编译器如何操作，示例如下：
{
"compileOnSave": true,
"compilerOptions":
{
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude":
[
"node_modules"
]
}
The important setting is compileOnSave which tells VS to compile the js file when you save the ts.
重要的设置是 compileOnSave，它告诉 VS 在保存 ts 时编译 js 文件。
You should now see you have a nested Javascript file within your TypeScript file:
您现在应该看到您的 TypeScript 文件中有一个嵌套的 Javascript 文件：
Now you just need to open both files side by side and when you save the ts then js will automatically update (it helps to tick the always update option if VS prompts you to load the changed file on disk).
现在您只需要并排打开两个文件，当您保存 ts 时，js 将自动更新（如果 VS 提示您将更改的文件加载到磁盘上，它有助于勾选始终更新选项）。
回答by HappyTown
I see your question is for VS 2017 and I don't find any documentation on VS 2017 to confirm if it has been added back. However, I did find that this was removed in VS 2015. See this link on Github
我看到你的问题是针对 VS 2017 的，我没有在 VS 2017 上找到任何文档来确认它是否已被添加回来。但是，我确实发现这在 VS 2015 中已被删除。请参阅Github 上的此链接
The TS preview pane has been removed from Web Essentials 2015 due to continuously running into conflicts with the TS compiler when new versions come out. The TS team are aware of it and I hope they will add the feature into the TS tooling in the future. It is possible that this feature will be included in the brand new Web Compiler extensions (https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c) when preview panes have been implemented.
TS 预览窗格已从 Web Essentials 2015 中删除，因为在新版本发布时不断遇到与 TS 编译器的冲突。TS 团队已经意识到这一点，我希望他们将来会将该功能添加到 TS 工具中。实施预览窗格后，此功能可能会包含在全新的 Web 编译器扩展 ( https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c) 中。
回答by Luke Duddridge
I have a work around, it is a bit of work but helps with the odd occasions when I want to check the output.
我有一个解决方法，它有点工作，但在我想检查输出的奇怪情况下有帮助。
I am running vs2017 I have web essentials installed and web compiler, but it still doesn't appear to support ts as of 15.4 and I couldn't get the tsconfig.json to work.
我正在运行 vs2017 我已经安装了 Web Essentials 和 Web 编译器，但它似乎仍然不支持 15.4 的 ts 并且我无法让 tsconfig.json 工作。
Briefly show the hidden files in your project and select the corresponding js file, then drag the tab to the right so you have a split screen
简要显示你项目中的隐藏文件并选择对应的js文件，然后向右拖动标签，这样你就可以分屏了
When you change and save the ts file, you might get a popup saying "The file has changed" or something like that, there is a check box you can select on there which says "AutoRestore if no changes detected" (again I might be paraphrasing, I attempted to find the option so I could reset it to get a screenshot but I cannot find it!), check that and then select "Yes to All" this refreshes the js file. The next time you change your ts file the js file will update.
当您更改并保存 ts 文件时，您可能会收到一个弹出窗口，提示“文件已更改”或类似内容，您可以选择一个复选框，上面写着“如果未检测到更改则自动恢复”（我可能再次解释一下，我试图找到该选项，以便我可以重置它以获取屏幕截图，但我找不到它！），检查并选择“全部是”，这将刷新 js 文件。下次更改 ts 文件时，js 文件将更新。
I know it isn't great, but I found it very useful as I could get an analog of what you see when following the course and they keep showing the preview of the javascript.
我知道它不是很好，但我发现它非常有用，因为我可以模拟您在学习课程时看到的内容，并且它们会不断显示 javascript 的预览。
回答by Tom
In Visual Studio 2017, you need to install the "Node.js development" Workload during the installation process or modify your existing install in the New Project dialog by clicking the "Not finding what you're looking for? Open Visual Studio Installer" link.
在 Visual Studio 2017 中，您需要在安装过程中安装“Node.js 开发”工作负载或通过单击“未找到您要查找的内容？打开 Visual Studio 安装程序”链接在“新建项目”对话框中修改现有安装.
Then File > New > Project... will include Javascript and Typescript project templates under the Installed category.
然后 File > New > Project... 将在 Installed 类别下包含 Javascript 和 Typescript 项目模板。
回答by VivekDev
I have installed web essentials 2017, but not sure if that is mandatory. The question is how to open two files side by side in VS 2017; specifically a typescript and its corresponding js file.
我已经安装了 Web Essentials 2017，但不确定这是否是强制性的。问题是如何在VS 2017中并排打开两个文件；特别是打字稿及其相应的 js 文件。
You can open any two files side by side the steps for which are as follows.
您可以并排打开任意两个文件，其步骤如下。
First open the two files in question by double clicking them from Solution Explorer.
首先通过在解决方案资源管理器中双击打开有问题的两个文件。
Next, place your cursor on the highlighted red box show above and drag that Car.js file tab down.
接下来，将光标放在上面突出显示的红色框上，然后向下拖动 Car.js 文件选项卡。
Now you see five small squares, highlighted with red square box. Move your cursor on any of the 4 outer small squares. I am placing my cursor on the right one as shown below.
现在您会看到五个小方块，用红色方框突出显示。将光标移动到 4 个外部小方块中的任何一个。我将光标放在右侧，如下所示。
There you go.
你去吧。
I guess this works without web essentials and is a feature of vs. Let me know if you could do this without having web essentials installed.
我想这可以在没有 Web Essentials 的情况下工作，并且是 vs 的一个功能。让我知道您是否可以在没有安装 Web Essentials 的情况下执行此操作。
