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