Visual Studio 2017 的打字稿支持

Typescript Support for Visual Studio 2017

我最近一直在尝试学习 TypeScript,在我安装 'Web Essentials' 扩展后观看的一些视频中,当我使用 .ts 文件时 visual studio 给你一个预习查看面板,以便您可以在键入时看到 JavaScript。

这些视频似乎使用的是 VS 2012。

但是在 VS 2017 上安装 Web Essentials 似乎没有这个选项,有谁知道我如何让它在 VS 2017 中工作?它对 TypeScript 有同样的支持吗?

我看到你的问题是针对 VS 2017 的,我没有找到任何关于 VS 2017 的文档来确认它是否已被添加回来。但是,我确实发现它已在 VS 2015 中删除。请参阅 Github

上的 link

由于在新版本发布时不断 运行 与 TS 编译器发生冲突,因此 TS 预览窗格已从 Web Essentials 2015 中删除。 TS 团队意识到了这一点,我希望他们将来会将该功能添加到 TS 工具中。实施预览窗格后,此功能可能会包含在全新的 Web 编译器扩展 (https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c) 中。

因此 TypeScript 默认随 VS2017 安装(更新 2 将为您提供最新版本的 2.3 并允许并行安装)。如果您没有它,您可以通过 Visual Studio 安装程序添加它 - 从安装程序中单击汉堡菜单并选择修改,然后单击单个组件,然后在 SDK、库和框架下您可以添加 TypeScript。

安装后,您可以添加一个 tsconfig.json 文件来告诉 TypeScript 编译器如何运行,示例如下:

{
    "compileOnSave": true,
    "compilerOptions":
    {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude":
    [
        "node_modules"
    ]
}

重要的设置是compileOnSave,它告诉VS在保存ts时编译js文件。

您现在应该看到您的 TypeScript 文件中有一个嵌套的 Javascript 文件:

现在你只需要并排打开两个文件,当你保存 ts 时,js 会自动更新(如果 VS 提示你将更改的文件加载到磁盘上,勾选始终更新选项会很有帮助)。

我有一个变通办法,虽然有点麻烦,但在我想检查输出的偶然情况下会有所帮助。

我是 运行 vs2017 我安装了 web essentials 和 web 编译器,但从 15.4 开始它似乎仍然不支持 ts,我无法让 tsconfig.json 工作。

简单显示你项目中的隐藏文件和select对应的js文件,然后向右拖动tab就可以分屏了

当你更改并保存 ts 文件时,你可能会看到一个弹出窗口,上面写着 "The file has changed" 或类似的东西,那里有一个你可以 select 的复选框,上面写着 "AutoRestore if no changes detected"(我可能再次解释,我试图找到该选项以便我可以重置它以获取屏幕截图但我找不到它!),检查然后 select "Yes to All" 这会刷新 js 文件.下次您更改 ts 文件时,js 文件将更新。

我知道它不是很好,但我发现它非常有用,因为我可以模拟您在学习课程时看到的内容,并且他们不断显示 javascript 的预览。

在 Visual Studio 2017 中,您需要在安装过程中安装 "Node.js development" 工作负载,或者通过单击 "Not finding what you're looking for? Open Visual Studio Installer" link.

然后文件 > 新建 > 项目... 将在已安装类别下包含 Javascript 和 Typescript 项目模板。

我已经安装了 web essentials 2017,但不确定这是否是强制性的。 问题是如何在 VS 2017 中并排打开两个文件;特别是打字稿及其相应的 js 文件。

您可以按照以下步骤并排打开任意两个文件。

首先从解决方案资源管理器中双击打开这两个文件。

接下来,将光标放在上面突出显示的红色框上,然后向下拖动 Car.js 文件选项卡。

现在您看到五个小方块,用红色方框突出显示。将光标移到 4 个外部小方块中的任意一个上。我将光标放在右侧,如下所示。

给你。

我想这可以在没有 web essentials 的情况下工作,并且是 vs 的一个功能。如果您可以在没有安装 web essentials 的情况下执行此操作,请告诉我。