PhpStorm 2021.3 Help

打字稿

PhpStorm 支持开发、运行和调试TypeScript源代码。PhpStorm 可识别.ts.tsx文件,并为编辑它们提供全方位的编码帮助,无需您执行任何额外步骤。TypeScript 文件标有打字稿文件图标。

支持 TypeScript 的编码帮助包括关键字、标签、变量、参数和函数的补全、错误和语法突出显示、格式化、大量代码检查快速修复,以及常见的和特定于 TypeScript 的重构。PhpStorm 还即时验证 TypeScript 代码,并在专用的问题工具窗口中显示错误。

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

在你开始前

  • 确保在Settings/Preferences |上启用了JavaScript 和 TypeScript插件。插件页面,标签Installed。有关详细信息,请参阅管理插件

验证 TypeScript

PhpStorm 主要基于来自TypeScript 语言服务的数据来验证 TypeScript 代码,该服务还将 TypeScript 编译成 JavaScript。

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

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

检查小部件

有关详细信息,请参阅在编辑器和问题工具窗口中查看问题并应用快速修复

验证当前文件中的 TypeScript

  • 在编辑器中,将鼠标指针悬停在突出显示的问题上。PhpStorm 显示带有问题描述的工具提示。

    在编辑器中查看错误描述

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

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

在整个项目中验证 TypeScript

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

    检查小部件

    或者选择查看 | 工具窗口 | 主菜单中的问题Alt+6或按。

  2. 打开项目错误选项卡,该选项卡显示整个项目中的错误,错误消息按检测到的文件分组。

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

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

配置与 TypeScript 语言服务的集成

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

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Languages and Frameworks | 打字稿

    或者,单击状态栏上的TypeScript小部件,然后选择配置 TypeScript

    打字稿小部件

    TypeScript 页面打开。

  2. 指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器Windows Subsystem for Linux 上的Node.js。

  3. TypeScript字段中,指定要使用的 TypeScript 版本(PhpStorm 显示当前选择的版本)。

    • 默认情况下,typescript使用项目的node_modules文件夹中的包。

    • 捆绑:选择此选项以使用typescriptPhpStorm 附带的包,而无需尝试查找另一个包。

    • 选择:选择此选项以使用自定义typescript包而不是与 PhpStorm 捆绑的包。在打开的对话框中,选择相关包的路径。

    • 如果你的项目包管理器是Yarn 2,你必须使用typescript通过 Yarn 2 安装的包。在这种情况下,yarn:package.json:typescript默认选中。

      从npm 和 Yarn了解更多关于包管理器的信息。

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

  5. 使用下面的控件来配置 TypeScript 语言服务的行为。

  6. 选项字段中,指定在找不到 tsconfig.json文件时要传递给 TypeScript 语言服务的命令行选项。请参阅TSC 参数中的可接受选项列表。请注意,-w--watchWatch input files)选项无关紧要。

重启 TypeScript 语言服务

  • 单击状态栏上的TypeScript小部件,然后从列表中选择重新启动 {0} 。

    状态栏上的 TypeScript 小部件:重新启动 TypeS 脚本语言服务

编辑 TypeScript 代码

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

自动导入

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

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

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

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

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 一般 | 自动导入自动导入页面打开。

  2. TypeScript/JavaScript区域中,选中自动添加 TypeScript 导入代码完成复选框。

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

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 一般 | 自动导入自动导入页面打开。

  2. TypeScript/JavaScript区域中,选中Add TypeScript imports automaticallyUnambiguous imports on the fly复选框。

使用自动导入工具提示

如果在完成或编辑时未添加 TypeScript 符号的导入语句,PhpStorm 会显示一个弹出窗口,建议导入该符号。

  • 要接受建议,请按Alt+Enter

    ws_import_pop_up.png
  • 如果有多个可能的导入来源,PhpStorm 会通知您:

    ws_import_pop_up_multiple_choices.png

    在这种情况下按下Alt+Enter会打开一个建议列表:

    ws_import_multiple_choices_suggestion_list.png
  • 要隐藏自动导入工具提示,请打开设置/首选项对话框 ( Ctrl+Alt+S),转到编辑器 | 一般 | Auto Import,并清除With auto-import tooltip复选框。

使用导入快速修复

如果未显示自动导入工具提示,您始终可以通过专用快速修复添加导入语句。

  • 要生成导入,请选择添加导入语句

    快速修复自动导入:没有选择

    如果只有一个源可以从中导入符号,PhpStorm 会生成一个导入语句:

    快速修复自动导入:添加了导入语句
  • 如果要从多个源导入符号,请从建议列表中选择相关的一个:

    自动导入快速修复,多种选择:建议列表
  • 如果你的项目中启用了 TypeScript 语言服务,你也可以使用它的建议:

    根据 TypeScript 语言服务的建议自动导入:没有选择

    如果要从多个源导入符号,请从 TypeScript 语言服务显示的列表中选择相关的一个:

    使用来自 TypeScript 语言服务的建议自动导入:多种选择

启用类型自动导入

  • 打开您的tsconfig.json文件并将importsNotUsedAsValues标志设置compilerOptionserror

    "importsNotUsedAsValues": "错误",

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

配置导入语句的外观

  • Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 代码风格 | TypeScript,并使用Imports选项卡中的控件。有关详细信息,请参阅导入选项卡

文档查找

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

文档显示在文档弹出窗口中,该弹出窗口有助于通过超链接导航到相关符号,并提供一个工具栏,用于在已导航的页面中来回移动。

查看符号的文档

  • 将插入符号放在符号上,然后按Ctrl+Q或选择查看 | 主菜单中的快速文档查找

  • 当您将鼠标指针悬停在符号上时,PhpStorm 会立即在文档弹出窗口中显示它的引用。

    您可以关闭此行为或将弹出窗口配置为更快或更慢,请参阅下面的配置文档弹出窗口的行为

对于 TypeScript 中可用的标准 JavaScript 方法,PhpStorm 还显示了指向相应MDN 文章的链接。

ws_ts_doc_from_mdn.png

配置文档弹出的行为

  • 要关闭自动显示文档,请打开Settings/Preferences对话框 ( Ctrl+Alt+S),转到Editor | Code Editing,并清除Show quick documentation on hover复选框。

  • 要更快或更慢地显示文档弹出窗口,请打开设置/首选项对话框 ( Ctrl+Alt+S),转到编辑器 | 一般 | Code Completion,然后选择Show the documentation popup复选框并指定延迟时间。

查看 MDN 文档以获取插入符号处的符号

  • 在“文档”窗口Ctrl+Q中,单击 MDN 链接。

  • 或者,按Shift+F1或选择查看 | 主菜单中的外部文档

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

查看镶嵌提示

嵌入提示出现在编辑器中,并为您提供有关代码的其他信息,以使其更易于阅读。

启用镶嵌提示

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S),转到编辑器 | Inlay Hints ,然后选中TypeScript旁边的复选框。

  2. 在下面的TypeScript页面上,指定您希望 PhpStorm 显示的提示和上下文。

参数提示

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

ws_typescript_parameter_hints.png

配置参数提示

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | 打字稿

  2. 从列表中选择参数提示,确保选中显示参数提示复选框,然后指定要显示参数提示的上下文。

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

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

返回类型提示

链式方法的返回类型提示是从JSDoc 注释或基于代码的静态分析推断出来的。默认情况下,返回类型提示会显示为在多行之间拆分并返回至少 2 种不同类型的链式方法。

配置方法返回类型提示

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | 打字稿

  2. 从列表中选择调用链中的方法返回类型,确保选中显示提示复选框,然后指定要显示返回类型提示的调用链中不同类型的最小数量。

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

输入提示

类型注释在其定义旁边显示变量类型或函数返回类型。类型注释是从JSDoc 注释或代码的静态分析中推断出来的。

配置类型提示

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | 打字稿

  2. 从列表中选择类型注释,确保选中显示类型提示复选框,然后指定要显示类型提示的上下文。

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

数字枚举值

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

隐藏数字枚举值

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | 打字稿

  2. 从列表中选择Numeric enum values并清除Show hints复选框。推断的值是隐藏的,只显示显式初始化的常量的值。

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

TypeScript 中的 JavaScript 库

在 TypeScript 中使用 JavaScript 库时,您需要为它们安装类型声明。PhpStorm 会提醒您通过npmyarn安装它们,并相应地更新您的package.json文件。

安装类型声明

  1. 将插入符号放在警告处,然后按Alt+Enter

  2. 选择建议并按Enter

    ws_ts_add_types.png

语法高亮

您可以根据自己的喜好和习惯配置可识别 TypeScript 的语法突出显示。

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 配色方案 | 打字稿

  2. 选择配色方案,接受从默认值继承的突出显示设置,或按照颜色和字体中的说明自定义它们。

代码导航

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

转到符号的声明

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

  • 要跳转到符号的声明,请将插入符号放在符号的使用处,然后按Ctrl+B或选择Navigate | 主菜单中的声明或用法

    前往申报

    或者,使用Ctrl+ClickCtrl按住,将鼠标指针悬停在符号上。当符号变为超链接时,单击超链接而不释放Ctrl

    使用 Ctrl+单击转到声明
  • 要在弹出窗口中查看符号的定义,请将插入符号放在其用法处,然后按Ctrl+Shift+I或选择查看 | 主菜单中的快速定义

    在弹出窗口中查看符号的定义

转到符号的用法

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

  1. 要获取符号的用法列表,请将插入符号放在符号的声明中并执行以下操作之一:

    • Ctrl+B或选择导航 | 主菜单中的声明或用法

    • Ctrl+Alt+F7或选择编辑 | 查找用法 | 从主菜单显示用法。

  2. 从列表中,选择要跳转的符号的用法。

    转到符号的用法

转到符号的类型声明

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

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

跳转到类型声明

  • 要从符号跳转到其类型的声明,请将插入符号放在符号的使用处,然后按Ctrl+Shift+B或选择Navigate | 从主菜单中输入声明。

    转到类型声明
  • 要在弹出窗口中查看符号的类型定义,请将插入符号放在要查看其类型定义的符号上,然后选择查看 | 快速类型定义

    快速类型定义

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

查看符号的推断类型信息

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

    符号的推断类型显示在工具提示中
  • 或者,将鼠标指针悬停在符号上。PhpStorm 立即在文档弹出窗口中显示它的参考。

    对象的推断类型显示在文档弹出窗口中

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

注意Go To DeclarationGo To Type Declaration之间的区别。假设您有一个包含以下代码的文件app.ts :

从“./dog”导入{Dog};让狗 = 新狗();dog.bark();
如果将插入符号放在dogin dog.bark(),则Go To Declaration会将您带到变量 in 的声明let dog = new Dog (),而Go To Type Declaration会将您带到类的声明Dog

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

您可以使用编辑器中的装订线图标或按相应的快捷方式来跟踪类实现和覆盖方法。

转到子类

  • 按下Ctrl+Alt+B或单击被覆盖的方法图标装订线,然后从列表中选择相关类。

    去后代班
  • 或者,选择导航 | 从主菜单或转到 |执行 从上下文菜单中选择实现,然后从列表中选择相关类。

转到超类或重写方法

  • 将插入符号放在子类上并按Ctrl+U。PhpStorm 将您带到超类的声明并将光标定位在其名称上。

  • 单击覆盖方法图标覆盖方法旁边的装订线。PhpStorm 将光标带到被覆盖方法上的超类。

    转到被覆盖的方法

    或者,将插入符号放在覆盖方法上,然后按Ctrl+U或选择Navigate | 主菜单中的超级方法或转到 | 上下文菜单中的超级方法

转到接口或实现的方法

  • 将插入符号放在接口的实现上,按Ctrl+U,然后选择要转到的接口。

    从类转到界面

    PhpStorm 将您带到接口的声明并将光标定位在其名称上。

  • 单击实施方法图标实施方法旁边的装订线。PhpStorm 将光标置于已实现的方法上,带您进入相应的界面。

    转到实现的方法

    或者,将插入符号放在实现方法上,然后按Ctrl+U或选择Navigate | 主菜单中的超级方法或转到 | 上下文菜单中的超级方法

TypeScript 中的重构

PhpStorm 提供了常见的重构过程,如rename/move等,以及特定于 TypeScript 的重构过程,如更改签名引入参数引入变量。有关详细信息,请参阅重命名重构移动重构重构 TypeScript

运行和调试您的应用程序

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

最后修改:2021 年 12 月 22 日