运行和调试 TypeScript
使用 WebStorm，可以运行和调试在 Node.js 上运行的服务端 TypeScript 代码以及在浏览器中运行的客户端 TypeScript 代码。
运行和调试服务端 TypeScript
使用 WebStorm，可以在无需事先将服务端 TypeScript 代码编译为 JavaScript 的情况下直接运行和调试。
对于包含多个 TypeScript 文件的服务端应用，在运行和调试时，WebStorm 使用内置加载器。 运行或调试单个文件时，您可以在运行/调试配置中的 TypeScript 加载器 列表中选择 无 来关闭加载器。
开始之前
运行服务端 TypeScript 代码
您可以通过 项目 工具窗口 Alt+1 、编辑器或 运行 小部件来运行服务器端 TypeScript。
在 项目 工具窗口 Alt+1 中，右键点击要运行的 TypeScript 文件或应用程序的入口文件，然后从上下文菜单中选择 。
在编辑器中，打开要运行的 TypeScript 文件或应用程序的入口文件，然后在列表中选择 。
在编辑器中，打开要运行的 TypeScript 文件或应用程序的入口文件。 然后在工具栏中的 运行 小部件中，选择 当前文件 并点击其旁边的
。或者，也可以在 运行 小部件中选择一个 先前创建的运行/调试配置 ，然后点击其旁边的
。
运行 TypeScript 临时文件
若要运行临时文件，除了上述方法外，还可以点击边距中的 ，并从列表中选择所需的操作。
自动生成的临时运行／调试配置
无论您选择哪种方式运行服务器端 TypeScript 代码，WebStorm 都会创建一个类型为 Node.js 的临时运行/调试配置，您可以保存、编辑并用于运行和调试。
了解更多信息，请参见 运行/调试配置。
调试服务端 TypeScript 代码
您可以通过 项目 工具窗口 Alt+1 、编辑器或 运行 小部件调试服务器端 TypeScript。
在需要的位置设置 断点。
在 项目 工具窗口中，右键点击要调试的 TypeScript 文件或应用程序的入口文件，并从上下文菜单中选择 。
在需要的位置设置 断点。
在编辑器中，打开要调试的 TypeScript 文件或应用程序的入口文件，并从上下文菜单中选择 。
在需要的位置设置 断点。
在编辑器中，打开要调试的 TypeScript 文件或应用的起始文件。 然后在工具栏中的 运行 小部件中选择 当前文件 并点击其旁边的
。或者，也可以在 运行 小部件中选择一个 先前创建的运行/调试配置 ，然后点击其旁边的
。
调试 TypeScript 临时文件
若要调试临时文件，除了上述方法外，您还可以点击边距中的 ，并从列表中选择所需的操作。
使用 ts-node
如果需要使用 Node.js 运行或调试单个 TypeScript 文件，您可以使用 ts-node ，而无需像在 将 TypeScript 编译为 JavaScript 中描述的那样编译代码。
安装 ts-node
在嵌入式 终端 （Alt+F12 ）中，键入：
npm install --save-dev ts-node
为 ts-node 创建自定义 Node.js 运行／调试配置
转到 。 或者，从工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 Node.js。 将打开 运行/调试配置：Node.js 对话框。在 Node 参数 字段中添加
--require ts-node/register。指定要使用的 Node.js 解释器。
如果选择 项目 别名，WebStorm 会自动使用 Node.js 页面中的 Node 解释器 字段里定义的项目默认解释器。 在大多数情况下，WebStorm 会检测项目默认解释器并自动填充该字段。
您也可以选择其他已配置的本地或远程解释器，或点击
来配置新的解释器。有关更多信息，请参见 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows Subsystem for Linux 上使用 Node.js。
在 文件 字段中，指定要运行或调试的 TypeScript 文件。 根据您的工作流程，您可以显式指定该文件，或使用 宏。
如果您打算始终启动相同的 TypeScript 文件，请点击
，然后在打开的对话框中选择此文件。 默认情况下，运行/调试配置将使用所选文件的名称。如果您需要启动不同的文件，请键入
$FilePathRelativeToProjectRoot$。 有了此 宏 ，WebStorm 将始终启动活动编辑器标签页中的文件。
如有必要，请在 应用程序形参(C) 字段中为
ts-node指定其他参数（例如，--project tsconfig.json）。保存该配置。
使用 ts-node 运行服务端 TypeScript
根据您在运行/调试配置中指定 TypeScript 文件的方式，执行下列操作之一：
如果您已明确输入文件名，请从工具栏中的 运行 小部件中选择所需配置，并点击列表旁边的
，或按 Shift+F10。如果指定了宏，请在编辑器中打开要运行的 TypeScript 文件，从工具栏上的 运行 小部件中选择 新建的配置 ，然后点击
或按 Shift+F10。
WebStorm 会在 运行 工具窗口中显示输出。
使用 ts-node 调试服务端 TypeScript
运行和调试客户端 TypeScript
由于浏览器只能处理 JavaScript，因此在运行或调试客户端 TypeScript 代码之前，您需要 进行编译。
编译过程还可以生成 source map ，以建立 TypeScript 代码与实际执行的 JavaScript 代码间的对应关系。
将 TypeScript 编译为 JavaScript
您可以使用内置编译器或其他工具单独使用或作为构建过程的一部分来编译 TypeScript。
默认情况下，内置编译器会在 TypeScript 文件旁边生成 JavaScript 文件和 source map。
您可以通过 编译 工具栏中的 TypeScript 小部件上的 状态 操作 手动触发编译 ，或 启用保存时自动编译。
编译错误会在 TypeScript 工具窗口中报告。 此列表不受您所做代码更改的影响，只有在您再次触发编译时才会更新。
该工具窗口仅在您首次手动编译 TypeScript 代码后显示。 之后，您可以通过主菜单中的 或工具窗口栏访问该工具窗口。
开始之前
按 Ctrl+Alt+S 打开设置，然后选择 。
请确保选中了 TypeScript 语言服务 复选框。
创建并配置 tsconfig.json
默认情况下，内置编译器不会创建允许您在调试会话中逐步执行 TypeScript 代码的 source map。 编译器默认还会处理活动编辑器选项卡中的 TypeScript 文件或当前项目中的所有 TypeScript 文件。
使用 tsconfig.json 文件，您可以修改此默认行为以生成 source map，并仅编译自定义作用域中的文件。
创建 tsconfig.json 文件
在 项目 工具窗口中 Alt+1 ，选择存放 TypeScript 代码的文件夹（通常是项目根文件夹），然后从上下文菜单中选择 。
要在编译期间生成 source map，请确保将
sourceMap属性设置为true。可选：
要覆盖默认的编译范围（即整个项目），请添加
files属性，并以下列格式输入要处理的文件名："files" : ["<file1.ts>","<file2.ts>"],
配置 tsconfig.json 的作用域
您可能需要对项目中不同的文件应用不同的 TypeScript 配置。
如果您将源文件组织得当，使同一文件夹中的所有文件都应使用相同配置处理，那就没有问题。 在这种情况下，您只需为每个文件夹创建一个单独的 tsconfig.json 。
但是，如果希望对存储于同一文件夹中的文件应用不同规则，您需要创建多个配置文件并为其配置作用域。
根据需要创建多个 tsconfig*.json 配置文件。
打开 设置 对话框（Ctrl+Alt+S ），转到 ，并确保所有这些文件的名称都符合 TypeScript 配置 文件名模式列表中的模式。
如有必要，请按照 添加文件类型关联中所述添加模式。
在每个 *tsconfig*.json 中，根据其设置指定要处理的文件：
在
files字段中明确列出文件名："files" : ["<file1.ts>","<file2.ts>"],在
include字段中指定文件名或模式："include" : ["<pattern1>, <pattern2>"]要跳过一些文件（其名称匹配
include字段中列出的模式），请在exclude字段中列出其名称或模式："exclude" : ["<pattern3>, <pattern4>"]
编译 TypeScript 代码
您可以 手动触发编译 ，也可以让 WebStorm 在代码更改时 自动编译代码。
或者，您可以配置构建流程，例如使用 webpack、 babel 或其他工具。 详见 webpack with TypeScript 和 Babel with TypeScript。
手动编译
点击状态栏上的 语言服务 小部件。
点击
。
在 编译 TypeScript 弹出窗口中，选择以下选项之一：
要编译整个应用的 TypeScript 代码，请选择 全部编译。
或者，从任何打开的 TypeScript 文件的上下文菜单中选择 编译 TypeScript。
要编译单个文件，请在 编译 TypeScript 弹出窗口中选择其路径。
要从自定义作用域编译文件，请确保这些文件已列在
files属性中，并在您的 tsconfig.json 如上所述 中设置。在 编译 TypeScript 弹出窗口中，选择 tsconfig.json 的路径。
变更时自动编译
打开 语言与框架 | TypeScript 设置页面 Ctrl+Alt+S ，然后选中 更改时重新编译 复选框。
运行客户端 TypeScript 应用
由于浏览器仅处理 JavaScript，因此在运行前，必须先编译客户端 TypeScript 代码。
运行客户端 TypeScript
在编辑器中打开引用了生成的 JavaScript 文件的 HTML 文件。 此 HTML 文件不必一定是实现应用程序起始页的文件。
执行以下操作之一：
从主菜单中选择 或按 Alt+F2。 然后从列表中选择所需的浏览器。
将鼠标悬停在代码上以显示浏览器图标栏：
。 单击所需浏览器图标。
调试客户端 TypeScript
由于浏览器仅处理 JavaScript，因此在调试前，必须先 编译客户端 TypeScript 代码。
在编译过程中，也可以生成 source map ，以建立 TypeScript 代码与实际执行的 JavaScript 代码之间的对应关系。 因此，您可以在 TypeScript 代码中设置断点，运行应用程序，然后借助生成的 source map 在原始 TypeScript 代码中逐步执行。
如果您的应用程序运行在 内置 WebStorm 服务器 上，请参阅上文的 运行客户端 TypeScript 应用程序 ，您也可以像调试 运行在内置服务器上的 JavaScript 一样调试该应用程序。
调试在外部 Web 服务器上运行的 TypeScript 应用
大多数情况下，您可能希望调试在外部开发 Web 服务器（例如由 Node.js 提供支持）上运行的客户端应用程序。
按 配置 JavaScript 调试器 中的说明配置内置调试器。
要启用 source map 的生成，请打开 tsconfig.json ，并将
sourceMap属性设置为true，如 创建 tsconfig.json 文件 中所述。在 TypeScript 代码中 配置并设置断点。
以 开发模式运行应用程序。 为此通常需要运行
npm start。在此阶段，TypeScript 通常会被编译为 JavaScript，并生成 source map。 有关更多信息，请参阅 将 TypeScript 编译为 JavaScript。
当开发服务器就绪时，复制浏览器中运行应用程序的 URL 地址——您需要在运行/调试配置中指定该 URL 地址。
转到 。 或者，从工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，单击工具栏上的 添加 按钮（
），然后从列表中选择 JavaScript 调试。 在打开的 运行/调试配置：JavaScript Debug 对话框中，指定应用程序运行的 URL 地址。 该 URL 可按上述 步骤 3 中所述，从浏览器地址栏中复制。
从工具栏的 运行 小部件列表中，选择新创建的 配置，然后单击其旁边的
。 浏览器中将打开运行配置中指定的 URL 地址，并显示 调试工具窗口。您可能需要刷新浏览器页面，以便在 调试 工具窗口中启用控件。
在 调试 工具窗口中，照常操作： 逐步执行程序， 停止并恢复程序执行， 在程序暂停时进行检查 ，探索调用栈和变量，设置监视器，计算变量的值， 查看实际 HTML DOM 等。