# 运行和调试 TypeScript

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `JavaScript Debugger` ，  `Node.js`  -  在   设置 | 插件   页面上安装插件。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

使用 IntelliJ IDEA，您可以运行并调试在 Node.js 上运行的服务器端 TypeScript 代码以及在浏览器中运行的客户端 TypeScript 代码。

> **Note:**
> 调试 TypeScript 客户端代码仅支持在 [Google Chrome](http://www.google.com/chrome/) 和其它 [基于 Chromium 的浏览器](https://www.chromium.org/) 中进行。
>
>
>
> 有关运行和调试 TypeScript 与 Angular 的更多信息，请参考 [运行 Angular 应用](run-and-debug-angular-applications.html#angular_running_and_debugging_run)和 [调试 Angular 应用](run-and-debug-angular-applications.html#angular_running_and_debugging_debug)。

## 运行并调试服务器端 TypeScript

使用 IntelliJ IDEA，您可以在不事先将其编译为 JavaScript 的情况下运行和调试服务器端的 TypeScript 代码。

### 开始之前

Procedure:

1. 确保您的计算机上安装有 [Node.js](http://nodejs.org/) 24 或更高版本。

2. 请确保在设置中已启用  JavaScript and TypeScript  捆绑插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

3. 安装  Node.js  和  JavaScript 调试器  插件（位于   设置 | 插件   页面），如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

### 运行服务端 TypeScript 代码

您可以从   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）、编辑器或   运行   微件运行服务端 TypeScript。

从 Project 工具窗口:

Procedure:

1. 打开   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)))。

2. 右键点击要运行的 TypeScript 文件或应用程序的起始文件。

3. 在上下文菜单中，选择  `运行 <TypeScript file name>` 。

![在"项目"工具窗口中运行服务端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_run_single_file_project_tw.animated.gif)

从编辑器:

Procedure:

1. 在编辑器中，打开要运行的 TypeScript 文件或应用程序的起始文件

2. 在编辑器中的任意位置右键点击，然后从上下文菜单中选择  `运行 <TypeScript file name>` 。

![从编辑器运行服务器端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_run_single_file_editor.animated.gif)

通过"运行"小部件:

Procedure:

1. 在编辑器中，打开要运行的 TypeScript 文件或应用程序的起始文件

2. 在工具栏的   运行   微件中选择   当前文件  ，然后点击其旁边的 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)。

或者，在   运行   小部件中选择一个 [先前创建的运行/调试配置](#ws_ts_server_side_run_generated_rc)，然后点击其旁边的 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)。

![从运行小组件运行服务器端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_run_single_file_widget.animated.gif)

#### 运行 TypeScript 临时文件

要运行临时文件，除了上述方法外，您还可以点击边栏中的 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)，并从列表中选择所需的操作。

![运行 TypeScript 临时文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_run_single_file_scratch.animated.gif)

#### 自动生成的临时运行/调试配置

无论您选择哪种方式运行服务端 TypeScript 代码，IntelliJ IDEA 都会创建一个类型为   Node.js   的临时运行/调试配置，您可以保存、编辑并重新使用它来运行和调试。

![Node.js 运行/调试配置，用于运行和调试服务端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置](run-debug-configuration.html)。

### 调试服务端的 TypeScript 代码

您可以从   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）、编辑器或   运行   微件调试服务端 TypeScript。

从项目视图:

Procedure:

1. 在需要的位置设置 [断点](using-breakpoints.html)。

2. 打开   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)))。

3. 右键点击要调试的 TypeScript 文件或应用程序的起始文件。

4. 在上下文菜单中，选择  `调试 <TypeScript file name>` 。

![在"项目"工具窗口中运行服务端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_single_file_project_tw.animated.gif)

从编辑器:

Procedure:

1. 在需要的位置设置 [断点](using-breakpoints.html)。

2. 在编辑器中，打开要调试的 TypeScript 文件或应用程序的起始文件

3. 在编辑器中的任意位置右键点击，然后从上下文菜单中选择  `调试 <TypeScript file name>` 。

![从编辑器调试服务器端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_single_file_editor.animated.gif)

通过"运行"小部件:

Procedure:

1. 在需要的位置设置 [断点](using-breakpoints.html)。

2. 在编辑器中，打开要调试的 TypeScript 文件或应用的起始文件。 然后在工具栏的   运行   小部件中选择   当前文件  ，并点击其旁边的 ![调试图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.debug.svg)。

或者，在   运行   小部件中选择一个 [先前创建的运行/调试配置](#ws_ts_server_side_run_generated_rc)，然后点击其旁边的 ![调试图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.debug.svg)。

![调试服务器端 TypeScript 从 Run widget](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_single_file_widget.animated.gif)

#### 调试 TypeScript 草稿文件

要调试一个 scratch 文件，除了上述方法，您还可以点击边栏中的 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)，然后从列表中选择所需的操作。

![运行 TypeScript 临时文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_single_file_scratch.animated.gif)

### 请使用 ts-node

如果 您 需要使用 Node.js 运行或调试单个 TypeScript 文件，您可以使用 [ts-node](https://www.npmjs.com/package/ts-node)，而不是按照 [将 TypeScript 编译为 JavaScript](#ws_ts_compile)中描述的那样编译代码。

Procedure: 安装 ts-node

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --save-dev ts-node`

Procedure: 创建自定义 Node.js 运行/调试配置用于 ts-node

1. 前往  `运行 | 编辑配置` 。 或者，在工具栏上的   运行   小部件中选择   编辑配置  。

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_client_ts_run_config_create.png)

在打开的   编辑配置  对话框中，点击工具栏上的   添加  按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Node.js](run-debug-configuration-node-js.html) 对话框打开。

2. 在   节点参数   字段中，添加  `--require ts-node/register` 。

3. 指定要使用的 Node.js 运行时。

如果您选择   项目   别名， IntelliJ IDEA 将自动使用在 [JavaScript 运行时](javascript-runtime.html) 页面上   Node.js 运行时   字段中的项目默认解释器。 在大多数情况下， IntelliJ IDEA 会检测到项目的默认运行时，并自动填写该字段。

您还可以选择其他已配置的本地或远程解释器，或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 并配置一个新的解释器。

4. 在   文件  字段中，指定要运行或调试的 TypeScript 文件。 根据您的工作流程，您可以显式地执行该操作或使用 [宏](built-in-macros.html)。

* 如果您总是要启动相同的 TypeScript 文件，请点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.open.svg)并在打开的对话框中选择此文件。 默认情况下，运行/调试配置会获取所选文件的名称。

* 如果您需要启动不同的文件，请输入 `$FilePathRelativeToProjectRoot$` 。 使用此 [macro](built-in-macros.html)，IntelliJ IDEA 将总是在活动编辑器选项卡中启动文件。

![ts-node 的自定义运行调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_ts_node.png)

5. 如果必要，您可以在   应用程序参数   字段中指定  `ts-node`  的其他参数（例如，  `--project tsconfig.json` ）。

6. 保存该配置。

Procedure: 使用 ts-node 运行服务器端 TypeScript

根据您在运行/调试配置中指定 TypeScript 文件的方式，执行以下操作之一：

* 如果您手动输入了文件名，请从工具栏上的   运行  小部件中选择所需的配置，然后点击列表旁边的 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)或按 `Shift+F10` (Windows), `⌃ R` (macOS), `⇧ F10` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ R` (macOS System Shortcuts), `Shift+F10` (XWin), `Shift+F10` (GNOME), `Shift+F10` (KDE), `Shift+F10` (Emacs), `Shift+F10` (Sublime Text), `Shift+F10` (Sublime Text (macOS)), `Ctrl+F5` (Visual Studio), `⌃ F5` (Visual Studio (macOS)), `F6` (NetBeans), `Alt+Shift+X` (Eclipse), `⌘ ⇧ F11` (Eclipse (macOS))。

* 如果您指定了宏，请在编辑器中打开要运行的 TypeScript 文件，从工具栏上的   运行  小部件中选择 [新创建的配置](#ws_ts_run_debug_directly_create_node_config)，然后点击 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)或按 `Shift+F10` (Windows), `⌃ R` (macOS), `⇧ F10` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ R` (macOS System Shortcuts), `Shift+F10` (XWin), `Shift+F10` (GNOME), `Shift+F10` (KDE), `Shift+F10` (Emacs), `Shift+F10` (Sublime Text), `Shift+F10` (Sublime Text (macOS)), `Ctrl+F5` (Visual Studio), `⌃ F5` (Visual Studio (macOS)), `F6` (NetBeans), `Alt+Shift+X` (Eclipse), `⌘ ⇧ F11` (Eclipse (macOS))。

IntelliJ IDEA 在   运行  工具窗口中显示输出。

Procedure: 使用 ts-node 调试服务端 TypeScript

1. 在需要调试的 TypeScript 文件中，根据需要设置 [断点](using-breakpoints.html)。

2. 根据您在运行/调试配置中指定 TypeScript 文件的方式，执行以下操作之一：

* 如果 您 亲自输入了文件名，请从工具栏上的 运行 小部件中选择所需的配置，然后点击 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg) 或按 `Shift+F9` (Windows), `⌃ D` (macOS), `⇧ F9` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ D` (macOS System Shortcuts), `Shift+F9` (XWin), `Shift+F9` (GNOME), `Shift+F9` (KDE), `Shift+F9` (Emacs), `Shift+F9` (Sublime Text), `⌃ D` (Sublime Text (macOS)), `Alt+F5` (Visual Studio), `⌥ F5` (Visual Studio (macOS)), `Ctrl+F5` (NetBeans), `Alt+Shift+D` (Eclipse), `⌘ F11` (Eclipse (macOS))。

* 如果您指定了宏，请在编辑器中打开 TypeScript 文件进行调试，从 [新创建的配置](#ws_ts_run_debug_directly_create_node_config) 中选择 运行 小部件并点击 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg) 或按 `Shift+F9` (Windows), `⌃ D` (macOS), `⇧ F9` (IntelliJ IDEA Classic (macOS)), `⌥ ⇧ D` (macOS System Shortcuts), `Shift+F9` (XWin), `Shift+F9` (GNOME), `Shift+F9` (KDE), `Shift+F9` (Emacs), `Shift+F9` (Sublime Text), `⌃ D` (Sublime Text (macOS)), `Alt+F5` (Visual Studio), `⌥ F5` (Visual Studio (macOS)), `Ctrl+F5` (NetBeans), `Alt+Shift+D` (Eclipse), `⌘ F11` (Eclipse (macOS))。

## 运行并调试客户端 TypeScript

由于浏览器仅处理 JavaScript，您必须在运行或调试之前 [编译您的客户端 TypeScript 代码](#ws_ts_compile)。

编译还可以生成 [source maps](https://code.tutsplus.com/tutorials/source-maps-101--net-29173)，以设置 TypeScript 代码和实际执行的 JavaScript 代码之间的对应关系。

### 将 TypeScript 编译为 JavaScript

可以 [通过 tsc 脚本调用编译](#ts_compiler_compile_code_manually)，或配置构建流程，例如使用 [webpack](https://webpack.js.org/)、 [babel](https://babeljs.io/) 或其他工具。 了解详情请参阅 [webpack 与 TypeScript](https://webpack.js.org/guides/typescript/) 和 [Babel 与 TypeScript](https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html)。

> **Warning:**
> 不建议通过   编译   操作从   TypeScript   微件上的   状态   栏，或在编辑器或   项目   工具窗口中的文件上下文菜单中调用编译。

#### 开始之前

Procedure:

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `语言与框架 | TypeScript` 。

2. 请确保选中   TypeScript 语言服务   复选框。

#### 创建并配置 tsconfig.json

默认情况下，内置编译器不会创建让您在调试期间逐步执行 TypeScript 代码的源映射。 编译器默认情况下还会处理活动编辑器选项卡中的 TypeScript 文件或当前项目中的所有 TypeScript 文件。

您可以使用  `tsconfig.json`  文件，更改此默认行为以生成源地图并仅编译来自自定义范围的文件。

Procedure: 创建一个 tsconfig.json 文件

1. 在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，选择包含您的 TypeScript 代码的文件夹（通常是项目根文件夹），然后从上下文菜单中选择  `新建 | tsconfig.json 文件` 。

2. 要在编译过程中生成 source maps，请确保  `sourceMap` 属性设置为  `true` 。

3. 可选 ：

要覆盖默认的编译范围（即整个项目），请添加  `文件`  属性，并按以下格式输入要处理的文件名：

```JSON
"files" : ["<file1.ts>","<file2.ts>"],

```

Procedure: 配置 tsconfig.json 的作用范围

您可能需要对项目中的不同文件应用不同的 TypeScript 配置。

如果您安排资源使每个文件夹中的所有文件都根据相同的配置进行处理，这不是问题。 在这种情况下，您只需为每个文件夹创建一个单独的  `tsconfig.json` 。

但是，如果您希望对存储在同一文件夹中的文件应用不同的规则，则需要创建多个配置文件并为其配置作用域。

1. 根据需要创建尽可能多的  `tsconfig*.json`  配置文件。

2. 打开   设置  对话框( `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)))，转到  `编辑器 | 文件类型` ，并确保所有这些文件的名称与   Typescript 配置  文件名模式列表中的模式匹配。

如果有必要，请添加如下所述的模式 [添加文件类型关联](creating-and-registering-file-types.html#create-new-file-type)。

![文件类型：tsconfig.json 模式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_config_pattern_list.png)

3. 在每个  `*tsconfig*.json`  中，根据其设置指定要处理的文件：

* 请在 `文件` 字段中明确列出文件名： ```JSON "files" : ["<file1.ts>","<file2.ts>"], ``` 从 [TSConfig 参考：文件](https://www.typescriptlang.org/tsconfig#files) 了解更多。

* 在 `包括` 字段中，指定文件名或模式： ```JSON "include" : ["<pattern1>, <pattern2>"] ``` 了解更多信息，请参阅 [TSConfig Reference: Include](https://www.typescriptlang.org/tsconfig#include)。

* 要跳过名称匹配 `包括` 字段中列出的模式的一些文件，请在 `排除` 字段中列出它们的名称或模式： ```JSON "exclude" : ["<pattern3>, <pattern4>"] ``` 从 [TSConfig参考：Exclude](https://www.typescriptlang.org/tsconfig#exclude) 了解更多信息。

> **Note:**
> IntelliJ IDEA 不仅仅使用了最近的  `tsconfig.*.json` （来自公认为  `Typescript 配置`  文件类型的文件列表）。 IntelliJ IDEA 使用最近的  `tsconfig.*.json` ，其中某个特定文件通过  `文件`  字段明确指定，或通过  `包括`  和  `排除`  字段中的模式指定。

#### 编译 TypeScript 代码

可以 [通过 tsc 脚本调用编译](#ts_compiler_compile_code_manually)，或配置构建流程，例如使用 [webpack](https://webpack.js.org/)、 [babel](https://babeljs.io/) 或其他工具。 了解详情请参阅 [webpack 与 TypeScript](https://webpack.js.org/guides/typescript/) 和 [Babel 与 TypeScript](https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html)。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_toolwindow_compilation_errors.mp4)

Procedure: 使用 tsc 脚本编译 TypeScript

1. 在  `package.json` 文件的  `scripts` 部分添加以下行：

* `tsc` - 编译 `tsconfig.json` 中定义作用域内的所有文件。

* `tsc <path to a file>` - 编译指定文件。

* `tsc <glob pattern>` - 编译符合模式的所有文件，例如 `tsc production/src/*.ts` 。

了解更多信息，请访问 [TypeScript 官方网站](https://www.typescriptlang.org/docs/handbook/compiler-options.html)。

2. 在脚本旁边的装订区域点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.gutter.run.svg)，然后选择   运行 '<script name>'  。

编译错误将在   运行   工具窗口中报告。

Procedure: 更改时自动编译

> **Note:**
> 强烈建议改为使用 [通过 tsc 脚本进行编译](#ts_compiler_compile_code_manually)。

* 打开   语言与框架 | TypeScript  设置页面 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))，并选中   更改时重新编译  复选框。

### 运行客户端 TypeScript 应用程序

由于浏览器仅处理 JavaScript，您必须在运行之前编译您的客户端 TypeScript 代码。

#### 运行客户端 TypeScript

Procedure:

1. [将 TypeScript 代码编译成 JavaScript](#ws_ts_compile)。

2. 在编辑器中打开包含对生成的 JavaScript 文件引用的 HTML 文件。 此 HTML 文件不一定是实现应用程序起始页的文件。

3. 请执行以下操作之一：

* 从主菜单中选择 `查看 | 在浏览器中打开` 或按 `Alt+F2` (Windows), `⌥ F2` (macOS), `⌥ F2` (IntelliJ IDEA Classic (macOS)), `⌥ F2` (macOS System Shortcuts), `Alt+F2` (XWin), `Alt+F2` (GNOME), `Alt+F2` (KDE), `Alt+F2` (Emacs), `Alt+F2` (Sublime Text), `Alt+F2` (Sublime Text (macOS)), `Alt+F2` (Visual Studio), `⌥ F2` (Visual Studio (macOS)), `Alt+F2` (NetBeans), `Alt+F2` (Eclipse), `⌥ F2` (Eclipse (macOS))。 然后从列表中选择所需的浏览器。

* 将鼠标悬停在代码上以显示浏览器图标栏： ![the IntelliJ IDEA 图标](https://resources.jetbrains.com/help/img/idea/2026.3/product.idea.svg) ![Chrome](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.chrome.svg) ![Firefox](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.firefox.svg) ![Safari](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.safari.svg) ![Opera](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.opera.svg) ![Internet Explorer](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.explorer.svg) ![Edge](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.edge.svg)。 点击指示所需浏览器的图标。

### 调试客户端 TypeScript

> **Note:**
> 调试 TypeScript 客户端代码仅支持在 [Google Chrome](http://www.google.com/chrome/) 和其它 [基于 Chromium 的浏览器](https://www.chromium.org/) 中进行。

由于浏览器仅处理 JavaScript，您必须在调试之前 [编译您的客户端 TypeScript 代码](#ws_ts_compile)。

在编译过程中，还可以生成 [source maps](https://code.tutsplus.com/tutorials/source-maps-101--net-29173)，它们设置了您的 TypeScript 代码与实际执行的 JavaScript 代码之间的对应关系。 因此，您可以在 TypeScript 代码中设置断点，启动应用程序，然后通过生成的 sourcemap 逐步执行您的原始 TypeScript 代码。

如果您的应用程序运行在  内置 IntelliJ IDEA 服务器 上，请参阅上面的 [运行客户端 TypeScript 应用程序](#ws_ts_run)部分，您也可以以与 [在内置服务器上运行的 JavaScript](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server)相同的方式调试它。

![在内置服务器上调试客户端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_client_built_in_server.animated.gif)

#### 调试在外部 web 服务器上运行的 TypeScript 应用程序

通常情况下，您可能希望调试运行在外部开发 Web 服务器上的客户端应用程序，例如，由 Node.js 提供支持的服务器。

![在外部服务器上调试客户端 TypeScript](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_client_external_server.animated.gif)

Procedure:

1. 按照 [配置 JavaScript 调试器](configuring-javascript-debugger.html)中的描述配置内置调试器。

2. 要启用源映射生成，请打开您的  `tsconfig.json`  并将  `sourceMap`  属性设置为  `true` ，如 [创建 tsconfig.json 文件](#ts_create_tsconfig_json) 中所述。

3. [配置并设置断点](using-breakpoints.html) 在 TypeScript 代码中。

4. 将应用程序在  development mode 中运行。 通常您需要运行  `npm start`  来实现。

通常，在此阶段 TypeScript 会被编译为 JavaScript，并生成源映射。 有关更多信息，请参阅 [将 TypeScript 编译为 JavaScript](#ws_ts_compile)。

当开发服务器准备就绪时，复制应用程序在浏览器中运行时的 URL 地址——您需要在运行/调试配置中指定此 URL 地址。

5. 前往  `运行 | 编辑配置` 。 或者，在工具栏上的   运行   小部件中选择   编辑配置  。

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_client_ts_run_config_create.png)

在打开的   编辑配置  对话框中，点击工具栏上的   添加  按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择   JavaScript Debug  。 在 [运行/调试配置：JavaScript Debug](run-debug-configuration-javascript-debug.html)对话框中，指定应用程序运行的 URL 地址。 此 URL 可以从浏览器地址栏中复制，如上文所述   步骤 3  。

![在外部服务器上调试客户端 TypeScript：运行配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_debug_client_external_server_rc.png)

6. 在工具栏的   运行   小部件列表中，选择新创建的    配置，然后点击其旁边的 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。 运行配置中指定的 URL 地址将在浏览器中打开，并会显示 [调试工具窗口](debug-tool-window.html)。

您可能需要刷新浏览器页面，以使   调试   工具窗口中的控件可用。

7. 在打开的   调试   工具窗口中，按常规操作： [逐步执行程序](stepping-through-the-program.html)、 [停止并恢复](starting-the-debugger-session.html#pause-resume) 程序执行、 [在暂停时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html) 等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

## See also

### 过程

[HTML](editing-html-files.html) [TypeScript](typescript-support.html)

### 参考

[Web 浏览器和预览](settings-tools-web-browsers.html)