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