IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. TypeScript

最终的
TypeScript

最后修改时间：2023年10月11日

所需插件：

Javascript and TypeScript - 该插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下启用。

IntelliJ IDEA 支持开发、运行和调试TypeScript源代码。IntelliJ IDEA 可识别.ts和.tsx文件，并提供全方位的编码帮助来编辑它们，而无需您执行任何其他步骤。TypeScript 文件标签有图标TypeScript文件。

TypeScript 采集编码帮助包括关键字完成、标签、变量、参数和函数、错误和语法强调显示、格式化、大量代码检查和快速修复，以及常见和 TypeScript 特定的重构。IntelliJ IDEA 还可以动态验证 TypeScript 代码，并在专用的问题工具窗口中显示错误。

TypeScript 工具窗口中报告编译错误。从将 TypeScript 编译为 JavaScript 中了解更多信息。

在你开始之前

创建一个新的应用程序

从现有的 TypeScript 应用程序开始

如果您想继续开发现有的 TypeScript 应用程序，只需在 IntelliJ IDEA 中打开它即可。（可选）下载所需的 npm 依赖项。

打开计算机上已有的应用程序源

  • 单击欢迎屏幕上的“打开”或“导入”，或选择“文件”|“导入”。从主菜单打开。在打开的对话框中，选择存储源的文件夹。

从版本控制中检查应用程序源

  1. 点击欢迎屏幕上的从VCS获取。

    或者，选择文件 |新 |来自版本控制或 Git 的项目|从主菜单克隆...。

    您可能会看到与您的项目关联的任何其他版本控制系统，而不是主菜单中的Git 。例如，Mercurial或Perforce。

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检查应用程序源的存储库。有关更多信息，请参阅查看项目（克隆）。

项目安全

当您在 IntelliJ IDEA 外部打开创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。

不可信项目警告

选择以下选项之一：

  • 在安全模式下预览：在这种情况下，IntelliJ IDEA 以预览模式打开项目。这意味着您可以浏览项目的源代码，但无法运行任务和脚本或运行/调试项目。

    IntelliJ IDEA 在编辑器区域顶部显示一条通知，您可以单击“信任项目...”链接并随时加载您的项目。

  • 信任项目：在这种情况下，IntelliJ IDEA 打开并加载项目。这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能均可用。

  • 不要打开：在这种情况下，IntelliJ IDEA 不会打开该项目。

从项目安全中了解更多信息。

提示

从欢迎屏幕或通过文件|创建新项目|中描述的项目将自动被视为可信。

验证TypeScript

IntelliJ IDEA 主要根据来自TypeScript 服务的数据来验证 TypeScript 代码，该服务验证语言 TypeScript 编译为 JavaScript。

在当前文件中检测到的错误的描述以及这些错误的快速修复可从编辑器和“问题”工具窗口的“文件”选项卡中获得。

整个项目中的错误及其快速修复显示在“问题”工具窗口的“项目错误”选项卡中。要打开工具窗口，请单击编辑器右上角的检查小部件：

检查小部件

有关更多信息，请参阅编辑器和问题工具窗口中查看问题并应用快速修复。

验证当前文件中的TypeScript

  • 在编辑器中，鼠标悬停在突出显示的问题上。IntelliJ IDEA 显示带有问题描述的工具提示。

    在编辑器中查看错误的描述

    应用建议的快速修复或单击“更多操作”并从列表中选择相关操作。

    在编辑器中应用快速修复

  • 或者打开“问题”工具窗口的“文件”选项卡，您可以在其中查看问题描述、应用快速修复、导航到源代码中发生错误的片段，以及在编辑器预览窗格中修复它们，而无需离开工具窗口。从问题工具窗口了解更多信息。Alt06

验证整个项目中的 TypeScript

  1. 要打开“问题”工具窗口，请单击编辑器右上角的“检查”小部件。

    检查小部件

    或者选择查看 | 工具窗口 | 出现问题请从主菜单或按。Alt06

  2. 打开“项目错误”选项卡，其中显示整个项目中的错误，以及按检测到错误的文件分组的错误消息。

    问题工具窗口，TypeScript。项目错误选项卡显示整个项目的语法错误

    在这里，您可以查看问题描述、应用快速修复、导航到源代码中发生错误的片段，以及在编辑器预览窗格中修复它们，而无需离开工具窗口。从问题工具窗口了解更多信息。

笔记

默认情况下启用检查整个项目的 TypeScript 代码。要关闭它，请打开“设置”对话框 ( )，转至语言和框架 | TypeScript，然后清除TypeScript 语言服务区域中的显示项目错误复选框。CtrlAlt0S

配置与 TypeScript 语言服务的集成

在大多数情况下，一切都是开箱即用的，不需要手动配置。但是，如果您想使用自定义typescript包或将某些命令行选项传递给 TypeScript 语言服务，则可以自定义默认设置。

重新启动 TypeScript 语言服务

本地化错误消息

/help/img/idea/2023.2/ws_ts_verification_localize_error_messages.png
动图

编辑 TypeScript 代码

IntelliJ IDEA 为您带来 TypeScript 的智能编码帮助，包括上下文感知代码完成、符号自动导入、文档查找、参数提示、导航、TypeScript 感知语法突出显示和linting、重构等。

自动导入

IntelliJ IDEA 可以为导出的模块、类、组件和任何其他 TypeScript 符号生成导入语句。默认情况下，IntelliJ IDEA 在您完成 TypeScript 符号时添加导入语句。

请参阅自动导入以了解如何优化导入语句并配置其样式。

当您键入代码或粘贴带有尚未导入的符号的片段时，IntelliJ IDEA 还可以为该符号生成导入语句。如果只有一个源可以导入符号，IntelliJ IDEA 会静默插入一条导入语句。否则，请使用自动导入工具提示或专用的导入快速修复。

在代码完成时添加导入语句

/help/img/idea/2023.2/ws_ts_import_on_completion.png
动图

  1. 在“设置”对话框 ( ) 中，转到编辑器 | 一般| 自动导入。自动导入页面打开。CtrlAlt0S

  2. 在TypeScript/JavaScript区域中，确保选中自动添加 TypeScript 导入和 代码完成复选框。

提示

要更改自动导入工具提示的背景颜色，请按并转到编辑器 | 配色方案| 一般| 弹出窗口和提示| 问题提示。CtrlAlt0S

在键入或粘贴代码时添加导入语句

/help/img/idea/2023.2/ws_ts_auto_import_on_paste.png
动图

  1. 在“设置”对话框 ( ) 中，转到编辑器 | 一般| 自动导入。自动导入页面打开。CtrlAlt0S

  2. 在TypeScript/JavaScript区域中，确保选中自动添加 TypeScript 导入和 动态明确导入复选框。

使用自动导入工具提示

  • 如果在完成或编辑时未添加 TypeScript 符号的导入语句，IntelliJ IDEA 会显示一个弹出窗口，建议导入该符号。要接受建议，请按：AltEnter

    如果有多个可能的导入源，IntelliJ IDEA 会通知您：

    自动导入工具提示：多种选择

    在这种情况下按会打开建议列表：AltEnter

    自动导入工具提示：多种选择、建议列表

  • 要隐藏自动导入工具提示，请打开“设置”对话框 ( )，转至编辑器 | 一般| 自动导入，然后清除 使用自动导入工具提示复选框。CtrlAlt0S

使用导入快速修复

如果自动导入工具提示未显示，您可以随时按并通过快速修复添加导入语句。AltEnter

  • 要生成导入，请选择 插入导入自：

    自动导入并快速修复：别无选择

    如果只有一个源可以导入符号，IntelliJ IDEA 会生成一条导入语句：

    自动导入并快速修复：添加了导入语句

  • 如果有多个源可供导入符号，请从建议列表中选择相关源：

    自动导入，快速修复，选择多种：建议列表

  • 如果您的项目中启用了 TypeScript 语言服务，您还可以使用它的建议：

    根据 TypeScript 语言服务的建议自动导入：多种选择

启用类型自动导入

  • 打开tsconfig.json文件并将importNotUsedAsValues标志设置compilerOptions为error：

    "importsNotUsedAsValues": "error",

从typeScript 官方网站了解更多信息。

配置导入语句的外观

  • 在“设置”对话框 ( ) 中，转到编辑器 | 代码风格| TypeScript ，并使用“导入”选项卡中的控件。CtrlAlt0S

文档查找

IntelliJ IDEA 允许您从项目及其依赖项、外部库中定义的符号以及标准 JavaScript API 获取符号的引用，因为 TypeScript 实现了所有这些符号。

默认情况下，文档显示在文档弹出窗口中，但您可以将其配置为显示在文档工具窗口中。

弹出窗口中的快速文档

/help/img/idea/2023.2/ws_ts_quick_doc_popup_706.png
动图

单击显示选项菜单图标弹出窗口可更改字体大小、显示快速文档工具栏或转到源代码。有关更多信息，请参阅 弹出窗口中的快速文档。

工具窗口中的快速文档

/help/img/idea/2023.2/ws_js_quick_doc_tool_window_706.png
动图

您可以在工具窗口中打开特定代码元素的文档，并继续查看当前文件中其他元素的文档，如在 工具窗口中保留文档中所述。

在工具窗口中，代码文档显示在未固定的选项卡（标有星号 ( ) 的选项卡*）上。您可以通过将鼠标悬停在符号上或将插入符号放在该符号上来查看此文档。有关更多信息，请参阅快速 文档工具窗口：模式。

查看插入符号处符号的 MDN 文档

  • 在“文档”窗口中，单击 MDN 链接。Ctrl0Q

  • 或者，按或选择查看 | 主菜单中的外部文档。ShiftF1

IntelliJ IDEA 在默认的 IntelliJ IDEA 浏览器中打开 MDN 文章 。

查看镶嵌提示

嵌入提示出现在编辑器中，为您提供有关代码的附加信息，使其更易于阅读和导航。

参数提示

参数提示显示方法和函数中的参数名称，使代码更易于阅读。默认情况下，仅对文字或函数表达式的值显示参数提示，但对命名对象不显示参数提示。

ws_typescript_parameter_hints.png

配置参数提示

  1. 打开“设置”对话框 ( ) 并转到编辑器 | 镶嵌提示。CtrlAlt0S

  2. 展开参数名称下的TypeScript。

  3. 通过选择相应的复选框来指定要显示参数提示的上下文。

    预览显示您在设置中所做的更改如何影响代码外观。

  4. 对于某些方法和函数，IntelliJ IDEA 不会在任何上下文中显示参数提示。单击排除列表...查看这些方法和函数，可能为它们启用参数提示，或将新项目添加到列表中。

  5. 要隐藏任何上下文中任何值类型的参数提示，请清除参数名称下的TypeScript复选框。

返回类型提示

IntelliJ IDEA 可以在函数调用和调用链中显示函数返回类型。

  • 函数返回类型提示是从JSDoc 注释或基于代码的静态分析推断出来的。

  • 如果方法调用分为多行并返回至少 2 种不同的类型，则会显示方法链中的返回类型提示。

配置函数返回类型提示

  1. 打开“设置”对话框 ( ) 并转到编辑器 | 镶嵌提示。CtrlAlt0S

  2. 在“类型”下，展开“TypeScript”节点，然后选中“函数返回类型”复选框。

  3. 要在方法链中显示返回类型提示，请展开方法链节点并选中TypeScript复选框。

预览显示您在设置中所做的更改如何影响代码外观。

类型提示

类型提示显示变量、字段或参数的类型。变量和字段的类型显示在其定义旁边。参数的类型提示显示在函数调用中。类型提示是从JSDoc 注释或代码的静态分析中推断出来的。

配置类型提示

  1. 打开“设置”对话框 ( ) 并转到编辑器 | 镶嵌提示。CtrlAlt0S

  2. 展开类型 | TypeScript。

  3. 展开类型注释节点并指定要显示类型提示的上下文。

    预览显示您在设置中所做的更改如何影响代码外观。

  4. 要隐藏任何上下文中任何值类型的参数类型和返回类型提示，请清除Types下的TypeScript复选框。

数字枚举值

默认情况下，IntelliJ IDEA 显示数字枚举的推断值，以使您的代码更易于阅读。

隐藏数字枚举值

  1. 打开“设置”对话框 ( ) 并转到编辑器 | 镶嵌提示。CtrlAlt0S

  2. 展开值节点并选择TypeScript复选框。IntelliJ IDEA 将隐藏推断值并仅显示显式初始化常量的值。预览显示您在设置中所做的更改如何影响代码外观。

TypeScript 中的 JavaScript 库

在 TypeScript 中使用 JavaScript 库时，您需要为它们安装类型声明。IntelliJ IDEA 提醒您通过npm或yarn安装它们并相应地更新您的package.json文件。

安装类型声明

  1. 将插入符号放在警告处并按。AltEnter

  2. 选择建议并按。Enter

    添加类型声明

语法高亮

您可以根据您的喜好和习惯配置 TypeScript 感知语法突出显示。

代码导航

您可以使用不同的操作和弹出窗口在 IntelliJ IDEA 编辑器中快速浏览 TypeScript 项目。

转到符号声明

您可以从变量、字段、方法或任何其他符号导航到其声明，或在弹出窗口中查看符号定义，而无需从正在编辑的代码跳转到任何位置。

转到符号的用法

您可以查看符号的用法列表并选择要跳转到的符号。

转到符号的类型声明

您可以从变量、字段、方法或任何其他符号导航到其类型声明。或者，在弹出窗口中打开类型定义，而不跳转到类型声明。

IntelliJ IDEA 还显示对象的推断类型。您可以在工具提示或文档弹出窗口中查看推断的类型信息。

跳转到类型声明

  • 要从符号跳转到其类型的声明，请将脱字符号放在符号的用法处，然后按或选择“导航 | ”。从主菜单键入声明。CtrlShift0B

    /help/img/idea/2023.2/ws_ts_go_to_type_declaration.png
    动图

  • 要在弹出窗口中查看符号的类型定义，请将脱字符号放在要查看其类型定义的符号处，然后选择查看| 快速类型定义。

    快速类型定义

    对于类的实例，这将显示类本身，而不是定义该实例的位置。

    提示

    IntelliJ IDEA 没有此操作的默认键盘快捷键，但您可以按照添加键盘快捷键中所述手动配置它。

查看符号的推断类型信息

  • 按住并将鼠标悬停在符号上。Ctrl

    /help/img/idea/2023.2/ws_typescript_inferred_types.png
    动图

  • 或者，将鼠标悬停在符号上。IntelliJ IDEA 立即在文档弹出窗口中显示其参考。

    /help/img/idea/2023.2/ws_typescript_inferred_types_popup.png
    动图

    从上面的文档查找中了解更多信息。

请注意“转到声明”和“转到类型声明”之间的区别。假设您有一个包含以下代码的文件app.ts ：

import {Dog} from "./dog";

let dog = new Dog();
dog.bark();
如果将插入符号放在dogin处dog.bark()，则转到声明会将您带到变量 in 的声明let dog = new Dog ()，而转到类型声明会将您带到类的声明Dog。

在子类、超类、覆盖和实现之间导航

您可以使用编辑器中的装订线图标或按适当的快捷键来跟踪类实现和重写方法。

转到子类

  • 按或单击装订线，然后从列表中选择相关类别。CtrlAlt0B重写方法图标

    /help/img/idea/2023.2/ws_ts_go_to_implementation.png
    动图

  • 或者，选择导航 | 从主菜单或转到 |实施 从上下文菜单中选择实现，然后从列表中选择相关类。

转到超类或重写的方法

  • 将插入符号放在子类上并按。IntelliJ IDEA 将带您进入超类的声明并将插入符号放在其名称处。Ctrl0U

  • 单击重写方法图标重写方法旁边的安装修改线。IntelliJ IDEA 将带到超类，并在重写的方法处添加插入符号。

    /help/img/idea/2023.2/ws_ts_go_to_overridden_​​method.png
    动图

    或者，将插入符号放在覆盖方法处，然后按或选择“导航| 导航”。从主菜单或转到|超级方法下面菜单中的超级方法。Ctrl0U

转到接口或实现的方法

  • 将插入符号放在接口的实现处，按，然后要选择转到的接口。Ctrl0U

    从类中转到界面

    IntelliJ IDEA 将带您进入接口声明插入符号放在其名称处。

  • 单击实施方法图标实施方法旁边的安装向导。IntelliJ IDEA 将您带到相应的界面，并在已实现的方法处添加插入符号。

    /help/img/idea/2023.2/ws_ts_go_to_implemented_method.png
    动图

    或者，将插入符号放在实现方法上，然后按或选择“导航”|“从主菜单或转到|超级方法上下文菜单中的超级方法。Ctrl0U

在 TypeScript 中重构

IntelliJ IDEA 既提供了常见的重构过程，例如重命名/移动等，也提供了 TypeScript 特定的重构过程，例如更改签名、引入参数、引入参数。有关更多信息，请参阅 重命名重构、移动和复制重构以及重构 TypeScript。

运行并调试您的应用程序

使用 IntelliJ IDEA，您可以运行和调试客户端 TypeScript 代码以及在 Node.js 中运行的 TypeScript 代码。从运行和调试 TypeScript了解更多信息。

也可以看看

参考

特定于语言和框架的指南

外部链接