# 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 一起捆绑，并默认启用。 IntelliJ IDEA 可识别 `.ts` 和 `.tsx` 文件，并提供编码辅助来编辑它们，而无需执行任何额外步骤。 TypeScript 文件以 ![TypeScript 文件](https://resources.jetbrains.com/help/img/idea/2026.3/ac_iconFileType_TypeScript.png) 图标标记。 TypeScript 智能编码辅助包括关键字、标签、变量、参数和函数的 [代码补全](auto-completing-code.html)、 [错误和语法高亮](#ws_ts_syntax_highlighting)、格式化、 [大量代码检查](code-inspection.html)和 [快速修复](null)，以及 [常见和 TypeScript 特定的重构](specific-typescript-refactorings.html)。 IntelliJ IDEA 还会 [即时验证 TypeScript 代码](#ws_verify_typescript)并在专用 [问题工具窗口](problems-tool-window.html)中显示错误。 编译错误会在 [TypeScript tool window](typescript-compiler-tool-window.html)中报告。 了解更多信息，请参阅 [Compiling TypeScript into JavaScript](running-and-debugging-typescript.html#ws_ts_compile)。 ## 开始之前 Procedure: * 请确保已在设置中启用 JavaScript 和 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)。 ## 创建一个新应用程序 从 IntelliJ IDEA 2024.1 版本开始， 新建项目 向导不再提供创建具有通用静态网页结构的 TypeScript 项目（或模块）的选项。 使用以下选项之一创建更具体的结构： [React](new-project-wizard.html#react)、 [Angular CLI](new-project-wizard.html#angular)、 [Vue](new-project-wizard.html#vue_js) 或 [Vite](new-project-wizard.html#vite)。 或者，在 欢迎 屏幕上点击 新建项目 ，或从主菜单中选择 `文件 | 新建 | 项目` ，然后在打开的 [新建 项目 向导](new-project-wizard.html) 的左侧窗格中选择 空项目 。 ## 从现有的 TypeScript 应用程序开始 如果您将继续开发一个现有的 TypeScript 应用，只需在 IntelliJ IDEA 中打开它。 可选地 [下载所需的 npm 依赖](javascript-specific-guidelines.html#ws_js_download_npm_dependencies)。 Procedure: 打开本机上已有的应用程序源代码 * 点击 打开或导入 屏幕上的 欢迎 或从主菜单中选择 `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。 Procedure: 从版本控制系统检出应用程序源代码 1. 在 欢迎 屏幕上点击 克隆存储库 。 或者，从主菜单中选择 `文件 | 新建 | 从版本控制创建项目…` 、 `Git | 克隆…` 或 `VCS | 从版本控制获取` 。 在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是 Git 。 例如， Mercurial 或 Perforce 。 2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。 ### 项目安全 打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。 请选择以下选项之一： * 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。 * 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。 * 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。 有关更多信息，请参阅 [项目安全](project-security.html)。 > **Tip:** > 从欢迎屏幕或通过 `文件 | 新建 | 项目` 创建的项目会被自动视为受信任。 ## 验证 TypeScript IntelliJ IDEA 主要基于 [TypeScript Language Service](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API) 的数据验证 TypeScript 代码，同时也将 TypeScript 编译成 JavaScript。 您可以在编辑器以及 [问题](linters.html#ws_js_linters_general_problems_tool_window) 工具窗口的 文件 选项卡中查看当前文件中检测到的错误的描述及其快速修复。 整个项目的错误及其快速修复显示在 项目错误 选项卡的 问题 工具窗口中。 若要打开工具窗口，请点击编辑器右上角的 检查 小组件： ![检查小部件](https://resources.jetbrains.com/help/img/idea/2026.3/inspection-widget.png) 有关详情，请参阅 [在编辑器中查看问题并应用快速修复](linters.html#ws_js_linters_editor)以及 [问题工具窗口](linters.html#ws_js_linters_general_problems_tool_window)。 Procedure: 验证当前文件中的 TypeScript * 在编辑器中，将鼠标悬停在高亮显示的问题上。 IntelliJ IDEA 会显示包含问题描述的工具提示。 ![在编辑器中查看错误描述](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_detect_error_in_editor.png) 应用建议的快速修复，或点击 更多操作… 并从列表中选择相关的修复。 ![在编辑器中应用快速修复](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_detect_error_in_editor_quick_fix.png) * 或者，打开 问题 工具窗口 `Alt+6` (Windows), `⌘ 6` (macOS), `⌘ 6` (IntelliJ IDEA Classic (macOS)), `⌘ 6` (macOS System Shortcuts), `Alt+6` (XWin), `Alt+6` (GNOME), `Alt+6` (KDE), `Alt+6` (Emacs), `Alt+6` (Sublime Text), `⌘ 6` (Sublime Text (macOS)), `Alt+6` (Visual Studio), `⌘ 6` (Visual Studio (macOS)), `Alt+6` (NetBeans), `Alt+6` (Eclipse), `⌘ 6` (Eclipse (macOS)) 的 文件 选项卡，在其中可以查看问题描述、应用快速修复、导航到源代码中发生错误的片段，并且无需离开工具窗口即可在 编辑器预览 窗格中修复这些问题。 了解详情，请参阅 [问题工具窗口](problems-tool-window.html)。 Procedure: 在整个项目中验证 TypeScript 1. 要打开 问题 工具窗口，请点击编辑器右上角的 检查 小部件。 ![检查小部件](https://resources.jetbrains.com/help/img/idea/2026.3/inspection-widget.png) 或者，从主菜单中选择 `查看 | 工具窗口 | 问题` 或按 `Alt+6` (Windows), `⌘ 6` (macOS), `⌘ 6` (IntelliJ IDEA Classic (macOS)), `⌘ 6` (macOS System Shortcuts), `Alt+6` (XWin), `Alt+6` (GNOME), `Alt+6` (KDE), `Alt+6` (Emacs), `Alt+6` (Sublime Text), `⌘ 6` (Sublime Text (macOS)), `Alt+6` (Visual Studio), `⌘ 6` (Visual Studio (macOS)), `Alt+6` (NetBeans), `Alt+6` (Eclipse), `⌘ 6` (Eclipse (macOS))。 2. 打开 项目错误 选项卡，该选项卡显示整个项目中的错误，错误消息按检测到的文件分组。 ![问题工具窗口、TypeScript。 项目错误选项卡显示整个项目的语法错误](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_toolwindow_syntax_errors.png) 在此，您可以查看问题描述、应用快速修复、导航到源代码中发生错误的片段，并且无需离开工具窗口即可在 编辑器预览 窗格中修复它们。 详细了解请参阅 [问题工具窗口](problems-tool-window.html)。 > **Note:** > 默认情况下，整个项目的 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` ，并清除 显示项目错误 复选框，该复选框位于 TypeScript 语言服务 区域。 ### 配置与 TypeScript 语言服务的集成 在大多数情况下，一切功能开箱即用，无需手动配置。 但是，如果想使用自定义 `typescript` 软件包，或将一些 [命令行选项](http://www.typescriptlang.org/docs/handbook/compiler-options.html) 传递给 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` 。 或者，点击 语言服务 小部件在 状态 栏上，然后点击 ![打开设置](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.settings.svg)。 ![TypeScript 小部件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_typescript_widget.png) > **Tip:** > 如果没有其他语言服务针对当前文件运行，该微件的标题会变为 TypeScript 。 > > > > 在编辑器中打开 TypeScript 文件后， TypeScript 微件会始终显示在状态栏上。 [TypeScript 页面](settings-languages-typescript.html)打开。 2. 指定要使用的 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) 并配置一个新的解释器。 3. 在 TypeScript 字段中，指定要使用的 TypeScript 版本（IntelliJ IDEA 显示当前选择的版本）。 * 默认使用项目 `node_modules` 文件夹中的 `typescript` 软件包。 * 捆绑： 选择此选项可使用随 IntelliJ IDEA 提供的 `typescript` 软件包，而不尝试查找其他软件包。 * 选择: 选择此选项可使用自定义 `typescript` 软件包，而不是随 IntelliJ IDEA 捆绑的软件包。 在打开的对话框中，选择相关包的路径。 * 如果您的项目包管理器是 [Yarn 2](https://yarnpkg.com/getting-started)，您必须使用通过 Yarn 2 安装的 `typescript` 包。 在这种情况下，默认会选中 `yarn:package.json:typescript` 。 有关软件包管理器的详细信息，请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html#ws_npm_yarn_configure_package_manager)。 4. 请确保选中 TypeScript 语言服务 复选框。 结果： * 语法和错误高亮显示基于 TypeScript 语言服务中的注解。 * 补全列表既包含来自 TypeScript 语言服务的建议，也包含由 IntelliJ IDEA 计算的建议。 * TypeScript 代码被编译成 JavaScript。 5. 使用下面的控件配置 TypeScript 语言服务的行为。 * 显示项目错误 - 默认情况下，此复选框已选中，TypeScript 语言服务会检查整个项目中的代码。 检测到的错误列在 项目错误 选项卡的 [问题工具窗口](problems-tool-window.html)中，根据它们发生的文件进行分组。 为避免性能问题，请清除 显示项目错误 复选框，使 TypeScript 语言服务仅在打开文件时检查文件。 随后， 项目错误 选项卡只会列出已打开文件中检测到的错误。 * 显示建议 - 默认情况下，此复选框已选中，除了实际错误之外，IntelliJ IDEA 还会显示 TypeScript 语言服务在代码中检测到的潜在问题。 显示建议已开启: ![显示建议已启用](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_settings_show_suggestions_on.png) 显示建议已关闭: ![显示建议已禁用](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_settings_show_suggestions_off.png) * 启用服务驱动的类型引擎 - 选中此复选框以根据 TypeScript 编译器 的数据评估符号的类型。 默认情况下，该复选框已清除，因此类型评估、解析、代码检查和重构操作基于 IntelliJ IDEA 内部 TypeScript 引擎中的类型信息。 此默认行为可能会导致性能问题以及类型解析中的错误，因为 IntelliJ IDEA 内部 TypeScript 引擎使用的类型评估算法与 TypeScript 编译器的算法不同。 选中该复选框可能有助于避免这些问题。 > **Note:** > 如果选中 TypeScript 语言服务 复选框，无论 启用服务驱动的类型引擎 复选框是选中还是清除，某些代码高亮显示和补全始终会从 TypeScript 语言服务检索。 6. 在 选项 字段中，指定在找不到 `tsconfig.json` 文件时要传递给 TypeScript 语言服务的命令行选项。 请参阅 [TSC arguments](http://www.typescriptlang.org/docs/handbook/compiler-options.html)中的可接受选项列表。 请注意， `-w` 或 `--watch` （ 监视输入文件 ）选项是无关的。 > **Tip:** > 可以使用来自 TypeScript 语言服务的建议来增强 JavaScript 文件中的补全。 为此，请将 `'allowJS' : true` 添加到 `jsconfig.json` 或 `tsconfig.json` 文件中。 了解详情，请参阅 [代码补全](auto-completing-code.html) 和 [配置 JavaScript 库](configuring-javascript-libraries.html)。 ### 重启 TypeScript 语言服务 Procedure: * 点击 语言服务 控件栏中的 状态 ，然后点击 ![重新启动服务图标](https://resources.jetbrains.com/help/img/idea/2026.3/app_client_expui_run_restart_language_service.png)。 ![状态栏上的 TypeScript 组件：重启 TypeScript 语言服务](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_restart_ts_language_service.png) > **Tip:** > 如果没有其他语言服务针对当前文件运行，该微件的标题会变为 TypeScript 。 ### 本地化错误信息 ![本地化错误信息](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_verification_localize_error_messages.animated.gif) 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 字段中，指定一个不同于 内置 的 `typescript` 包。 这可能是 `typescript` 包，来自您的项目 `node_modules` 文件夹或其他任何位置。 3. 在 选项 字段中，输入 `--locale ` 。 当前支持韩语（ `ko` ）和日语（ `ja` ）。 ## 自动导入 IntelliJ IDEA 可以生成模块、类、组件以及任何其他导出的符号的导入语句。 导入语句可以在键入、粘贴或补全符号时实时添加，也可以稍后通过导入工具提示、快速修复或意图操作添加。 请参阅 [自动导入](creating-and-optimizing-imports.html)，了解如何优化导入语句并配置其样式。 实时自动导入: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_on_paste.mp4) 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))）中，转到 `编辑器 | 常规 | 自动导入` 。 [自动导入](settings-auto-import.html) 页面将打开。 2. 在 TypeScript/JavaScript 区域，确保选中 自动添加 TypeScript 导入 和 实时添加无歧义的导入 复选框。 补全时自动导入: ![自动导入在完成时](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_import_on_completion.animated.gif) 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))）中，转到 `编辑器 | 常规 | 自动导入` 。 [自动导入](settings-auto-import.html) 页面将打开。 2. 在 TypeScript/JavaScript 区域，确保选中 自动添加 TypeScript 导入 和 在代码补全时 复选框。 使用导入工具提示: Procedure: * 如果在补全或编辑时未添加 TypeScript 符号的导入语句，IntelliJ IDEA 会显示工具提示，建议导入该符号。 要接受建议，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) ![导入工具提示 - 单一导入来源](https://resources.jetbrains.com/help/img/idea/2026.3/ws_import_tooltip_single_source.png) 如果有多个可能的导入来源，IntelliJ IDEA 会通知您： ![自动导入工具提示：多个选择](https://resources.jetbrains.com/help/img/idea/2026.3/ws_import_pop_up_multiple_choices.png) 在这种情况下按下 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))会打开一个建议列表： ![自动导入提示：多项选择，建议列表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_import_multiple_choices_suggestion_list.png) * 要隐藏自动导入工具提示，请打开 设置 对话框（ `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))），转到 `编辑器 | 常规 | 自动导入` ，并清除 使用自动导入工具提示 复选框。 * 要更改自动导入工具提示的背景颜色，请按 `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)) 并转到 `编辑器｜配色方案｜常规｜弹出窗口和提示｜问题提示` 。 使用快速修复或意图操作: Procedure: 如果自动导入工具提示未显示，您可以随时按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 并通过快速修复添加导入语句。 * 要生成导入，请选择 插入导入自 ： ![使用快速修复自动导入：无选项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_quick_fix_single_choice.png) 如果只有一个来源可导入符号，IntelliJ IDEA 会生成一个 import 语句： ![使用快速修复自动导入：已添加 import 语句](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_quick_fix_import_atatement_added.png) * 如果有多个源可以导入符号，请从建议列表中选择相关的一个： ![自动导入与快速修复，多种选择：建议列表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_quick_fix_multiple_choices_suggestion_list.png) * 如果项目中启用了 TypeScript 语言服务，也可以使用其建议： ![通过 TypeScript 语言服务的建议自动导入：多个选择](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_quick_fix_ts_service_multiple_choices.png) ### 配置在 import 语句中使用 type 修饰符 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. 切换到 导入 选项卡，并在 在 import 中使用 type 修饰符 字段中配置在类型的导入语句中使用 `类型` 修饰符。 请注意，设置仅适用于类型，对于非类型，无论您选择哪个选项，都不会插入 `类型` 修饰符。 自动: 启用此选项后，如果在您的 `tsconfig.json` 中指定了 ["importsNotUsedAsValues": "error"](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) 或 ["verbatimModuleSyntax": true](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)，则会添加一个 `类型` 修饰符。 否则，如果没有首选的导入类型，则不会插入 `类型` 修饰符。 ![自动](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_configure_type_modifier_auto.animated.gif) 始终带有 type: 使用此选项时，无论在您的 `tsconfig .json` 中是否指定 ["importsNotUsedAsValues": "error"](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) 或 ["verbatimModuleSyntax": true](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax)，始终会插入 `类型` 修饰符： ![始终带有 type](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_configure_type_modifier_always.animated.gif) 从不: 使用此选项，IntelliJ IDEA 永远不会使用 `类型` 修饰符，而不论 ["importsNotUsedAsValues": "error"](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) 或 ["verbatimModuleSyntax": true](https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax) 标志在您的 `tsconfig.json` 中: ![从不](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_auto_import_configure_type_modifier_never.animated.gif) 如果已经有一个带有 `类型` 修饰符的 import 语句，此修饰符将始终用于进一步导入类型，而不论选择的选项和您的 `tsconfig.json` 中的设置如何。 对于常量，使用 `{<常量名称>}` 说明符代替 `类型` 修饰符。 对于 TypeScript 4.5 及更高版本，如果选择了 自动 或 始终 ，所有先前的修饰符都会转换为 `{type}` 指定符。 否则，所有现有的指定符将保持不变。 了解更多信息，请访问 [TypeScript 官方网站](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)。 Procedure: 配置导入语句的外观 * 在 设置 对话框( `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` ，并使用 导入 选项卡中的控件。 ## 文档查找 IntelliJ IDEA 允许您获取项目和其依赖项中的符号、外部库中定义的符号以及标准 JavaScript APIs 的引用，因为 TypeScript 实现了它们。 默认情况下，文档显示在 文档 弹出窗口中，但您始终可以在 [Documentation 工具窗口](documentation-tool-window.html) 中打开，甚至可以将其配置为默认在 文档工具窗口 中显示。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_quick_doc_popup_and_tw.mp4) Procedure: 查看快速文档 * 在编辑器中将鼠标悬停在所需符号上。 或者，将文本光标放置在符号处并按下 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))或从主菜单中选择 `查看 | 快速文档` 。 * 要在 文档 工具窗口中默认打开快速文档，请在弹出窗口中或在工具窗口的工具栏上点击 ![选项图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg)，并清除 首先显示文档弹出窗口 选项。 * 在弹出窗口中点击 ![显示选项菜单图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg) 可更改字体大小、显示快速文档工具栏或转到源代码。 有关更多信息，请参阅 [弹出窗口中的快速文档](viewing-reference-information.html#quick_doc_popup_configure)。 您可以在工具窗口中打开特定代码元素的文档，并按照 [在工具窗口中保留文档](viewing-reference-information.html#keep-docs-in-tool-window)的描述，继续查看当前文件中其他元素的文档。 在工具窗口中，代码文档显示在未固定的选项卡上（以星号符号（ `*` ）标记的选项卡）。 您可以将鼠标悬停在符号上或将插入符号置于其上来查看该文档。 有关更多信息，请参阅 [快速文档工具窗口：模式](viewing-reference-information.html#quick_doc_tw_modes)。 ### 在文本光标处查看 MDN 文档 对于 TypeScript 中可用的标准 JavaScript 方法，IntelliJ IDEA 还会显示一个指向相应 [MDN 文章](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 的链接。 ![MDN 快速文档查找](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_doc_from_mdn.png) Procedure: 1. 在 文档 窗口 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))中，点击 MDN 链接。 2. 或者按下 `Shift+F1` (Windows), `⇧ F1` (macOS), `⇧ F1` (IntelliJ IDEA Classic (macOS)), `⇧ F1` (macOS System Shortcuts), `Shift+F1` (XWin), `Shift+F1` (GNOME), `Shift+F1` (KDE), `Shift+F1` (Emacs), `Shift+F1` (Sublime Text), `⇧ F1` (Sublime Text (macOS)), `Shift+F1` (Visual Studio), `⇧ F1` (Visual Studio (macOS)), `Shift+F1` (NetBeans), `Shift+F2` (Eclipse), `⇧ F2` (Eclipse (macOS)) 或从主菜单中选择 `视图 | 外部文档` 。 IntelliJ IDEA 会在 [默认 IntelliJ IDEA 浏览器](configuring-third-party-tools.html#web-browsers)中打开 MDN 文章。 ## 查看内嵌提示 嵌入提示会显示在编辑器中，并提供有关代码的附加信息，使代码更易于阅读和导航。 内嵌提示可用于 `.ts` 和 `.tsx` 文件中。 * 如果启用了 TypeScript 语言服务且 TypeScript 版本为 4.4 或更高版本，嵌入提示会从 TypeScript 语言服务检索。 * 对于较早的 TypeScript 版本，或者如果 TypeScript 语言服务已禁用，嵌入提示会从内部 IntelliJ IDEA 评估器检索。 > **Tip:** > 强烈建议 [如上所述](#ws_ts_use_ts_service_checkbox)启用 TypeScript 语言服务。 与许多始终分析整个文件的检查和高亮显示不同，提示仅检索当前可见区域，并在滚动时更新。 此行为旨在提高性能。 ### 参数提示 形参提示 会显示方法和函数中的形参名称，使代码更易于阅读。 ![ws_typescript_parameter_hints.png](https://resources.jetbrains.com/help/img/idea/2026.3/ws_typescript_parameter_hints.png) 在 TypeScript 版本 5.2 及以上，参数提示在悬停时会变成链接。 按住 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS)) 点击此类链接可转到方法定义。 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))），然后转到 `编辑器 | 内嵌提示` 。 2. 展开 TypeScript 下的 参数名称 。 3. 通过选择相应的复选框指定您希望显示参数提示的上下文。 预览显示了您在设置中所做的更改如何影响代码外观。 4. 要隐藏任意上下文中任意值类型的参数提示，请取消选中 TypeScript 复选框下的 参数名称 。 ### 返回类型提示 IntelliJ IDEA 可以在函数调用和调用链中显示函数返回值类型。 * 函数返回类型提示 是从 [TypeScript Language Service](#ws_ts_use_ts_service_checkbox) 获取的。 * 如果方法调用拆分在多行之间并且返回至少 2 种不同类型，则会显示 方法链中的返回值类型提示 。 方法链中的返回类型提示由内部 IntelliJ IDEA 评估器提供。 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))），然后转到 `编辑器 | 内嵌提示` 。 2. 在 类型 下，展开 TypeScript 节点，然后选中 函数／方法返回值类型 复选框。 3. 要在方法链中显示返回值类型提示，请展开 方法链 节点并选中 TypeScript 复选框。 预览显示了您在设置中所做的更改如何影响代码外观。 ### 类型提示 类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 形参的类型提示会显示在函数调用中。 类型提示根据 [JSDoc 注释](creating-jsdoc-comments.html) 或代码的静态分析推断得出。 在 TypeScript 版本 5.3 及更高版本中，类型提示在悬停时会变成链接。 按住 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS)) 点击此类链接可转到类型定义。 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))），然后转到 `编辑器 | 内嵌提示` 。 2. 展开 `Types | TypeScript` 。 3. 指定要显示类型提示的上下文。 预览显示了您在设置中所做的更改如何影响代码外观。 4. 若要隐藏任何上下文中任何值类型的参数类型和返回类型提示，请取消选中 TypeScript 复选框，位于 类型 下。 ### 数字枚举值 IntelliJ IDEA 为 [numeric enums](https://www.typescriptlang.org/docs/handbook/enums.html) 提供提示，使您的代码更易于阅读。 这些提示会从 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))），然后转到 `编辑器 | 内嵌提示` 。 2. 展开 值 节点并选择 TypeScript 复选框。 IntelliJ IDEA 将隐藏提示并仅显示显式初始化常量的值。 预览显示了您在设置中所做的更改如何影响代码外观。 ## TypeScript 中的 JavaScript 库 在使用 TypeScript 处理 JavaScript 库时，您需要为它们 [安装类型声明](https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html)。 IntelliJ IDEA 提醒您通过 npm 或 yarn 安装它们，并相应地更新您的 `package.json` 文件。 Procedure: 安装类型声明 1. 将文本光标放置在警告处，然后按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。 ![缺少类型声明](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_add_types_warning.png) 2. 选择建议并按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。 ![添加类型声明](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_add_types.png) ## TypeScript Native Previews (TypeScript-Go) IntelliJ IDEA 通过 [TypeScript Native Previews](https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/) 提供基本的 TypeScript-Go 支持。 Procedure: 启用 TypeScript-Go 支持 * 在项目中将 `@typescript/native-preview` 软件包作为依赖项安装，而不是安装 `typescript` 软件包。 为此，请打开 `package.json` ，并将 `typescript` 替换为 `@typescript/native-preview` 。 将鼠标悬停在 `@typescript/native-preview` 版本上时，IntelliJ IDEA 会显示一个弹出窗口，通知指定的软件包未安装。 点击 运行 'npm install' 链接。 ![安装 @typescript/native-preview 而不是 typescript](https://resources.jetbrains.com/help/img/idea/2026.3/ts_native_previews_enable_in_package_json.png) * 在计算机上的其他位置安装 `@typescript/native-preview` ，并将其指定为项目中要使用的 TypeScript 软件包。 为此： 1. 在计算机上安装 `@typescript/native-preview` 软件包，例如进行全局安装。 在命令行 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 --g @typescript/native-preview` 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` ，并在 TypeScript 字段中指定 `@typescript/native-preview` 软件包的路径。 如果遵循了标准安装过程，IntelliJ IDEA 会在 TypeScript 下拉列表中显示 `@typescript /native-preview` 软件包。 ![在设置对话框中启用全局安装的 @typescript/native-preview 软件包](https://resources.jetbrains.com/help/img/idea/2026.3/ts_native_previews_enable_in_settings_dialog.png) * 在本地克隆并构建 [TypeScript-Go 仓库](https://github.com/microsoft/typescript-go/)，然后 [如上所述](#ts_native_previews_enable_in_settings_dialog_specify_path)在 设置 | 语言 & 框架 | TypeScript 对话框的 TypeScript 字段中定位它。 > **Note:** > 此选项仍在开发中。 可能会遇到一些小问题。 ## 重新格式化代码 IntelliJ IDEA 允许您根据当前的 [代码样式方案](configuring-code-style.html#configure-code-style-schemes) 重新格式化 TypeScript 代码。 您还可以在 [.editorconfig](null) 中指定格式设置，或使用 [Prettier](prettier.html)。 ### 装饰器 对于装饰器，在重新格式化期间抑制在每个装饰器后插入换行可能很重要。 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. 在 换行和大括号 选项卡上，选择相关的装饰器类型选项。 ![配置装饰器的换行方式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_steps.png) 以下是装饰器的可用格式设置选项： #### 不换行 选中此选项后，重新格式化包含装饰器的行时不会应用换行。 类装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_class_decorator_do_not_wrap.mp4) 方法装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_do_not_wrap_class_method_decorators.mp4) 字段装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_do_not_wrap_class_field_decorators.mp4) 函数参数装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_do_not_wrap_function_parameter_decorators.mp4) #### 过长时换行 选择此选项时，如果行超出右边距，则会换行。 右边距在 硬换行位置 字段中定义，位于 [设置 | 编辑器 | 代码样式 | JavaScript | 换行和大括号](null) 中。 如果行超出指定的数字，则会换行。 类装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_if_long_class_decorators.mp4) 方法装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_if_long_class_method_decorators.mp4) 字段装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_if_long_class_field_decorators.mp4) 函数参数装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_if_long_function_parameter_decorators.mp4) #### 过长时分行 选择此选项时，如果装饰器超出右边距，将每行格式化一个装饰器。 #### 始终换行 选择此选项时，所有装饰器将每行格式化一个。 类装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_always_class_decorators.mp4) 方法装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_always_class_method_decorators.mp4) 字段装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_always_class_field_decorators.mp4) 函数参数装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_reformat_code_decorators_wrap_always_function_parameter_decorators.mp4) ## 语法高亮 您可以根据自己的偏好和习惯配置 TypeScript-aware 语法高亮显示。 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. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。 ## 代码导航 您可以使用不同的操作和弹出窗口在 IntelliJ IDEA 编辑器中快速浏览您的 TypeScript 项目。 ### 转到符号声明 您可以从变量、字段、方法或任何其他符号导航到其声明或 [在弹出窗口中查看符号定义](#typescript_code_navigation_go_to_declaration_view_definition_in_popup)，而无需离开正在编辑的代码。 Procedure: * 要跳转到符号的声明位置，请将文本光标放在符号的使用位置并按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS)) 或从主菜单中选择 `导航 | 声明或用法` 。 ![转到声明](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_declaration.animated.gif) 或者，使用 `Ctrl+Click` (Windows), `Ctrl+Click` (macOS), `Ctrl+Click` (IntelliJ IDEA Classic (macOS)), `Ctrl+Click` (macOS System Shortcuts), `Ctrl+Click` (XWin), `Ctrl+Click` (GNOME), `Ctrl+Click` (KDE), `Ctrl+Click` (Emacs), `Ctrl+Click` (Sublime Text), `Ctrl+Click` (Sublime Text (macOS)), `Ctrl+Click` (Visual Studio), `Ctrl+Click` (Visual Studio (macOS)), `Ctrl+Click` (NetBeans), `Ctrl+Click` (Eclipse), `Ctrl+Click` (Eclipse (macOS))：按住 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS))，将鼠标悬停在符号上。 当该符号变为超链接时，请在不松开的情况下点击此超链接 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS))。 ![按住 Ctrl 键点击以转到声明](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_declaration_ctrl_click.animated.gif) * * 若要在弹出窗口中查看符号的定义，请将文本光标放在该符号的使用位置并按 `Ctrl+Shift+I` (Windows), `⌥ Space` (macOS), `⌘ ⇧ I` (IntelliJ IDEA Classic (macOS)), `⌘ Y` (macOS System Shortcuts), `Ctrl+Shift+I` (XWin), `Ctrl+Shift+I` (GNOME), `Ctrl+Shift+I` (KDE), `Ctrl+Shift+I` (Emacs), `Ctrl+Shift+I` (Sublime Text), `⌥ Space` (Sublime Text (macOS)), `Alt+F12` (Visual Studio), `⌥ Space` (Visual Studio (macOS)), `Ctrl+Shift+I` (NetBeans), `Ctrl+Shift+I` (Eclipse), `⌥ Space` (Eclipse (macOS)) 或从主菜单中选择 `查看 | 快速定义` 。 ![在弹出窗口中查看符号的定义](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_declaration_view_definition_in_popup.png) ### 转到符号的用法 您可以查看符号的用法列表并选择跳转到其中一个。 Procedure: 1. 要获取符号用法的列表，请将文本光标放置在符号的声明处，然后执行以下操作之一： * 按 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS)) 或从主菜单中选择 `导航 | 声明或用法` 。 * 按 `Ctrl+Alt+F7` (Windows), `⌘ ⌥ F7` (macOS), `⌘ ⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ U` (macOS System Shortcuts), `Ctrl+Alt+7` (XWin), `Ctrl+Alt+7` (GNOME), `Ctrl+Alt+7` (KDE), `Ctrl+Alt+F7` (Emacs), `Shift+F12` (Sublime Text), `⇧ F12` (Sublime Text (macOS)), `Alt+Shift+F12` (Visual Studio), `⌥ ⇧ F12` (Visual Studio (macOS)), `Ctrl+Alt+F7` (NetBeans), `Ctrl+Alt+F7` (Eclipse), `⌘ ⌥ F7` (Eclipse (macOS)) 或从主菜单中选择 `编辑｜查找用法｜显示用法` 。 2. 在弹出窗口中，使用工具栏上的图标配置列表外观并过滤掉不相关的用法，例如，在 import 语句中。 ![配置 Go To Usages 列表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_usages_popup.animated.gif) 3. 从列表中选择要跳转的符号用途，然后按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。 ![转到符号的用法](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_usages.animated.gif) ### 转到符号的类型声明 您可以从变量、字段、方法或任何其他符号导航到其类型声明。 或者， [在弹出窗口中打开类型定义](#ws_quick_type_definition_procedure)，而不跳转到类型声明。 IntelliJ IDEA 还显示对象的 [推断类型](https://www.typescriptlang.org/docs/handbook/type-inference.html)。 您可以在工具提示或文档弹出窗口中查看推断的类型信息。 Procedure: * 要从符号跳转到其类型的声明，请将文本光标放置在符号的使用位置并按 `Ctrl+Shift+B` (Windows), `⌘ ⇧ B` (macOS), `⌃ ⇧ B` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ B` (macOS System Shortcuts), `Ctrl+Shift+B` (XWin), `Ctrl+Shift+B` (GNOME), `Ctrl+Shift+B` (KDE), `Ctrl+Shift+B` (Emacs), `Ctrl+Shift+B` (Sublime Text), `Ctrl+Shift+B` (Sublime Text (macOS)), `Ctrl+Shift+F11` (Visual Studio), `⌘ ⇧ F11` (Visual Studio (macOS)), `Ctrl+Shift+B` (NetBeans), `Ctrl+Shift+B` (Eclipse), `Ctrl+Shift+B` (Eclipse (macOS)) 或从主菜单中选择 `导航 | 类型声明` 。 ![转到类型声明](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_type_declaration.animated.gif) * 要在弹出窗口中查看符号的类型定义，请将文本光标放在您要查看类型定义的符号上，然后选择 `查看 | 快速类型定义` 。 ![快速类型定义](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_quick_type_definition.png) 对于类的一个实例，这将揭示类本身，而不是定义该实例的位置。 > **Tip:** > IntelliJ IDEA 没有此操作的默认键盘快捷键，但您可以按照 [添加键盘快捷键](configuring-keyboard-and-mouse-shortcuts.html#add-keyboard-shortcut) 中的描述手动配置。 请注意 `转到声明` 和 `转到类型声明` 之间的区别。 假设您有一个文件 `app.ts` ，其中包含以下代码： ```TYPESCRIPT import {Dog} from "./dog"; let dog = new Dog(); dog.bark(); ``` 如果您将文本光标放置在 `dog` 中 `dog.bark()` ，则 `转到声明` 会将您带到 `let dog = new Dog ()` 中变量的声明，而 `转到类型声明` 会将您带到类 `Dog` 的声明。 Procedure: 查看符号的推断类型信息 * 按住 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS))并将光标悬停在符号上。 ![符号的推断类型显示在工具提示中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_typescript_inferred_types.animated.gif) * 或者，悬停在符号上。 IntelliJ IDEA 会立即在 文档 弹出窗口中显示其引用。 ![对象的推断类型显示在文档弹出窗口中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_typescript_inferred_types_popup.animated.gif) 了解更多信息，请参阅上面的 [文档查找](#ws_ts_documentation_look_up)。 ### 在子类、超类、重写和实现之间导航 您可以通过使用编辑器中的装饰图标或按下相应的快捷键来跟踪类的实现和重写方法。 Procedure: 转到子类 * 按 `Ctrl+Alt+B` (Windows), `⌘ ⌥ B` (macOS), `⌘ ⌥ B` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ B` (macOS System Shortcuts), `Ctrl+Alt+B` (XWin), `Ctrl+Alt+B` (GNOME), `Ctrl+Alt+B` (KDE), `Ctrl+Alt+B` (Emacs), `Ctrl+Alt+B` (Sublime Text), `⌘ ⌥ B` (Sublime Text (macOS)), `Alt+End` (Visual Studio), `⌘ ⌥ Click` (Visual Studio (macOS)), `Ctrl+Alt+B` (NetBeans), `Ctrl+T` (Eclipse), `Ctrl+Alt+B` (Eclipse (macOS)) 或点击 ![重写方法图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.gutter.overridenMethod.svg) 图标，然后从列表中选择相关的类。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_implementation.mp4) * 或者，从主菜单中选择 `导航 | 实现` 或从上下文菜单中选择 `转到 | 实现` ，然后从列表中选择相关的类。 Procedure: 转到超类或重写的方法 * 将文本光标放在子类上并按 `Ctrl+U` (Windows), `⌘ U` (macOS), `⌘ U` (IntelliJ IDEA Classic (macOS)), `⌘ U` (macOS System Shortcuts), `Ctrl+U` (XWin), `Ctrl+U` (GNOME), `Ctrl+U` (KDE), `Ctrl+U` (Emacs), `Ctrl+U` (Sublime Text), `⌘ U` (Sublime Text (macOS)), `Alt+Home` (Visual Studio), `⌃ ⌥ ←` (Visual Studio (macOS)), `Ctrl+Shift+P` (NetBeans), `Ctrl+U` (Eclipse), `Ctrl+U` (Eclipse (macOS))。 IntelliJ IDEA 将您带到超类的声明处，并将文本光标放置在其名称上。 * 点击 ![覆盖方法图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.gutter.overridingMethod.svg) 覆盖方法旁的标记。 IntelliJ IDEA 将您带到超类，文本光标位于被重写的方法处。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_overridden_method.mp4) 或者，将文本光标放在重写方法处，然后按 `Ctrl+U` (Windows), `⌘ U` (macOS), `⌘ U` (IntelliJ IDEA Classic (macOS)), `⌘ U` (macOS System Shortcuts), `Ctrl+U` (XWin), `Ctrl+U` (GNOME), `Ctrl+U` (KDE), `Ctrl+U` (Emacs), `Ctrl+U` (Sublime Text), `⌘ U` (Sublime Text (macOS)), `Alt+Home` (Visual Studio), `⌃ ⌥ ←` (Visual Studio (macOS)), `Ctrl+Shift+P` (NetBeans), `Ctrl+U` (Eclipse), `Ctrl+U` (Eclipse (macOS)) 或从主菜单中选择 `导航 | 超级方法` 或从上下文菜单中选择 `转到 | 超级方法` 。 Procedure: 转到接口或已实现的方法 * 请将文本光标放在接口的实现处并按下 `Ctrl+U` (Windows), `⌘ U` (macOS), `⌘ U` (IntelliJ IDEA Classic (macOS)), `⌘ U` (macOS System Shortcuts), `Ctrl+U` (XWin), `Ctrl+U` (GNOME), `Ctrl+U` (KDE), `Ctrl+U` (Emacs), `Ctrl+U` (Sublime Text), `⌘ U` (Sublime Text (macOS)), `Alt+Home` (Visual Studio), `⌃ ⌥ ←` (Visual Studio (macOS)), `Ctrl+Shift+P` (NetBeans), `Ctrl+U` (Eclipse), `Ctrl+U` (Eclipse (macOS))。 ![从类转到接口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_interface_from_class_name.animated.gif) IntelliJ IDEA 将会带您到接口的声明处，并将文本光标定位到其名称。 * 点击 ![实现方法图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.gutter.implementingMethod.svg) 位于实现方法旁边的边框中。 IntelliJ IDEA 将您带到相应的界面，并将文本光标定位到已实现的方法。 ![转到实现的方法](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_go_to_implemented_method.animated.gif) 或者，将文本光标放在实现方法处，然后按 `Ctrl+U` (Windows), `⌘ U` (macOS), `⌘ U` (IntelliJ IDEA Classic (macOS)), `⌘ U` (macOS System Shortcuts), `Ctrl+U` (XWin), `Ctrl+U` (GNOME), `Ctrl+U` (KDE), `Ctrl+U` (Emacs), `Ctrl+U` (Sublime Text), `⌘ U` (Sublime Text (macOS)), `Alt+Home` (Visual Studio), `⌃ ⌥ ←` (Visual Studio (macOS)), `Ctrl+Shift+P` (NetBeans), `Ctrl+U` (Eclipse), `Ctrl+U` (Eclipse (macOS))，或者从主菜单中选择 `导航 | 超级方法` ，或从上下文菜单中选择 `转到 | 超级方法` 。 ## 在 TypeScript 中重构 IntelliJ IDEA 提供常见的重构过程，例如 重命名/移动 等，以及特定于 TypeScript 的重构过程，例如 更改签名 、 引入参数 、 引入变量 。 有关更多信息，请参阅 [重命名重构](rename-refactorings.html)、 [移动和复制重构](move-refactorings.html)和 [重构 TypeScript](specific-typescript-refactorings.html)。 ## 运行和调试您的应用程序 使用 IntelliJ IDEA，您可以运行和调试客户端的 TypeScript 代码以及运行在 Node.js 中的 TypeScript 代码。 了解更多信息，请参阅 [运行和调试 TypeScript](running-and-debugging-typescript.html)。 ## See also ### 外部链接 [TypeScript official website](https://github.com/Microsoft/TypeScript) ### 参考 [TypeScript](settings-languages-typescript.html) ### 语言和框架特定指南 [JavaScript](javascript-specific-guidelines.html) [Node.js](developing-node-js-applications.html) [React](react.html)