运行和调试 TypeScript
使用 WebStorm，您可以运行和调试客户端 TypeScript 代码和在 Node.js 中运行的 TypeScript 代码。
在运行或调试应用程序之前，您需要将 TypeScript 代码编译成 JavaScript。您可以使用内置的 TypeScript 编译器和其他工具来做到这一点，包括用于使用 Node.js 运行 TypeScript 的ts-node，单独使用或作为构建过程的一部分。
在编译期间，还可以生成源映射，用于设置 TypeScript 代码和实际执行的 JavaScript 代码之间的对应关系。因此，您可以在 TypeScript 代码中设置断点，使用JavaScript Debug（用于客户端代码）或Node.js类型的运行/调试配置启动应用程序，然后单步执行您的原始 TypeScript 代码，这要归功于生成的源图。
运行客户端 TypeScript 应用程序
您可以使用 TypeScript 编写客户端应用程序，按照将TypeScript 编译为 JavaScript中所述编译代码，然后以与使用 JavaScript 编写的客户端应用程序完全相同的方式运行和调试您的应用程序。唯一的区别是您可以直接在 TypeScript 代码中设置断点。
在编辑器中，打开 HTML 文件并引用生成的 JavaScript 文件。该 HTML 文件不一定是实现应用程序起始页的文件。
执行以下操作之一：
选择从主菜单Alt+F2或按。然后从列表中选择所需的浏览器。
将鼠标指针悬停在代码上以显示浏览器图标栏：
。单击指示所需浏览器的图标。
调试客户端 TypeScript 应用程序
大多数情况下，您可能想要调试在外部开发 Web 服务器上运行的客户端应用程序，例如，由 Node.js 提供支持。如果您的应用程序在内置 WebStorm 服务器上运行，请参阅上面的运行客户端 TypeScript 应用程序，您也可以像在内置服务器上运行 JavaScript一样对其进行调试。
调试在外部 Web 服务器上运行的 TypeScript 应用程序
如配置 JavaScript 调试器中所述配置内置调试器。
在 TypeScript 代码中配置和设置断点。
在开发模式下运行应用程序。通常你需要为此而奔波
npm start。大多数情况下，在这个阶段 TypeScript 被编译成 JavaScript 并生成源映射，有关详细信息，请参阅将TypeScript 编译成 JavaScript。
开发服务器准备就绪后，复制应用程序在浏览器中运行的 URL 地址 - 您需要在运行/调试配置中指定此 URL 地址。
选择从主菜单，单击工具栏并从列表中
选择JavaScript 调试。在打开的运行/调试配置：JavaScript 调试对话框中，指定运行应用程序的 URL 地址。此 URL 可以从浏览器的地址栏中复制，如上面第 3 步所述。选择新创建的从工具栏上的选择运行/调试配置列表中选择配置，然后单击
列表旁边的。运行配置中指定的 URL 地址将在所选浏览器中打开，并出现调试工具窗口。在调试工具窗口中，照常进行：单步执行程序， 停止和恢复程序执行，暂停时检查，查看实际的 HTML DOM，在控制台中运行 JavaScript 代码片段，等等。.
使用 Node.js 运行和调试服务器端 TypeScript 应用程序
使用 WebStorm，您可以通过Node.js运行配置在 Node.js 上启动服务器端 TypeScript 代码。在运行或调试之前，您的 TypeScript 代码必须编译为 JavaScript，如将TypeScript编译为 JavaScript 中所述。
在你开始前
使用 Node.js 运行服务器端 TypeScript
将您的 TypeScript 代码编译为 JavaScript，有关详细信息，请参阅将 TypeScript 编译为 JavaScript。
创建一个Node.js运行/调试配置：
从主菜单中，选择，然后在Edit Configurations对话框中，单击工具栏上的 并从列表中
选择Node.js。在打开的运行/调试配置：Node.js对话框中，指定要使用的 Node.js 解释器。在JavaScript 文件字段中，指定从启动它的应用程序的主文件生成的编译文件。
从创建 Node.js 运行/调试配置中了解更多信息。
从工具栏上的Select run/debug configuration列表中选择新创建的Node.js配置，然后单击列表旁边的 。
使用 Node.js 调试服务器端 TypeScript
将您的 TypeScript 代码编译为 JavaScript，有关详细信息，请参阅将 TypeScript 编译为 JavaScript。
必要时在 TypeScript 代码中设置断点。
如上所述创建 Node.js 运行/调试配置。
从工具栏上的Select run/debug configuration列表中选择新创建的Node.js配置，然后单击列表旁边的 。调试工具窗口打开。
执行将触发带有断点的代码执行的步骤。
切换到 WebStorm，现在启用了Debug工具窗口的控件。
使用 ts 节点
如果您需要使用 Node.js 运行或调试单个 TypeScript 文件，您可以使用ts-node而不是按照将TypeScript 编译为 JavaScript中所述编译代码。
安装 ts-node
在嵌入式终端( Alt+F12) 中，键入：
npm install --save-dev ts-node
为 ts-node 创建自定义 Node.js 运行/调试配置
从主菜单中，选择，然后在Edit Configurations对话框中，单击工具栏上的 并从列表中
选择Node.js。运行/调试配置：Node.js对话框打开。在节点参数字段中，添加
--require ts-node/register.指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或Windows Subsystem for Linux 上的Node.js。
在JavaScript 文件字段中，指定要运行或调试的文件。根据您的工作流程，您可以显式执行此操作或使用宏。
如果您要始终启动相同的 TypeScript 文件，请
在打开的对话框中单击并选择此文件。默认情况下，运行/调试配置获取所选文件的名称。如果您需要启动不同的文件，请键入
$FilePathRelativeToProjectRoot$. 使用此宏，WebStorm 将始终在活动编辑器选项卡中启动文件。
可选
要将任何其他参数传递给 ts-node（例如
--project tsconfig.json），请将它们添加到应用程序参数字段中。保存配置。
运行 TypeScript 文件
根据您在运行/调试配置中指定 TypeScript 文件的方式，执行以下操作之一：
如果您明确键入了文件名，请在“项目”工具窗口中选择该文件或在编辑器中打开它，然后选择。
或者，从工具栏上的列表中选择所需的配置，然后单击
列表旁边的 或按Shift+F10。如果您指定了宏，请在编辑器中打开 TypeScript 文件，从工具栏上的列表中选择新创建的配置，然后单击
或按Shift+F10。
WebStorm 在运行工具窗口中显示输出。