Pycharm
 
2023.3
快捷方式：Windows
获取 PyCharm
  1. 语言和框架
  2. TypeScript

TypeScript

最后修改时间：2023 年 12 月 1 日

仅适用于 PyCharm Professional：下载以尝试或 比较版本

所需插件：

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

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

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

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

在你开始之前

创建一个新应用程序

从现有的 TypeScript 应用程序开始

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

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

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

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

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

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

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

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

项目安全

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

不可信项目警告

选择以下选项之一：

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

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

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

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

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

提示

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

验证 TypeScript

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

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

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

检查小部件

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

验证当前文件中的 TypeScript

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

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

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

    在编辑器中应用快速修复

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

验证整个项目中的 TypeScript

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

    检查小部件

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

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

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

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

笔记

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

配置与 TypeScript 语言服务的集成

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

重新启动 TypeScript 语言服务

本地化错误消息

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

编辑 TypeScript 代码

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

自动导入

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

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

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

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

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

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

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

提示

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

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

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

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

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

使用自动导入工具提示

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

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

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

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

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

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

使用导入快速修复

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

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

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

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

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

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

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

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

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

配置导入语句中类型修饰符的使用

如果已经存在带有修饰符的 import 语句，则无论所选选项以及tsconfig.jsontype中的设置如何，该修饰符始终用于进一步导入类型。

对于常量，{<constant name>}使用说明符而不是type修饰符。对于选择“自动”或“始终”的 TypeScript 4.5 及更高版本，所有先前的修饰符都会转换为{type}说明符。否则，所有现有说明符保持不变。

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

配置导入语句的外观

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

文档查找

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

默认情况下，文档显示在“文档”弹出窗口中，但您始终可以在“文档”工具窗口中打开它，甚至将其配置为默认显示在“文档”工具窗口中。

/help/img/idea/2023.3/ws_ts_quick_doc_popup_and_tw.png
动图

查看快速文档

  • 将鼠标悬停在编辑器中的必要符号上。

    或者，将脱字符号放在符号处，然后按或选择查看| 从主菜单快速文档。Ctrl0Q

  • 要默认在文档工具窗口中打开快速文档，请选项图标单击工具窗口的弹出窗口或工具栏上的 ，然后清除首先显示文档弹出窗口选项。

  • 单击显示选项菜单图标弹出窗口可更改字体大小、显示快速文档工具栏或转到源代码。

    有关更多信息，请参阅 弹出窗口中的快速文档。

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

在工具窗口中，代码文档显示在未固定的选项卡上（该选项卡标有星号 ( *)）。您可以通过将鼠标悬停在符号上或将插入符号放在该符号上来查看此文档。

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

对于 TypeScript 中可用的标准 JavaScript 方法，PyCharm 还显示相应MDN 文章的链接。

快速文档查找：MDN

查看镶嵌提示

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

参数提示

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

ws_typescript_parameter_hints.png

配置参数提示

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

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

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

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

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

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

返回类型提示

PyCharm 可以显示函数调用和调用链中的函数返回类型。

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

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

配置函数返回类型提示

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

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

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

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

类型提示

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

配置类型提示

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

  2. 展开类型 | TypeScript。

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

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

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

数字枚举值

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

隐藏数字枚举值

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

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

TypeScript 中的 JavaScript 库

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

安装类型声明

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

    缺少类型声明

  2. 选择建议并按。Enter

    添加类型声明

语法高亮

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

代码导航

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

转到符号声明

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

转到符号的用法

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

转到符号的类型声明

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

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

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

import {Dog} from "./dog";

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

查看符号的推断类型信息

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

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

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

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

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

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

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

转到子类

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

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

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

转到超类或重写的方法

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

  • 单击重写方法图标重写方法旁边的装订线。PyCharm 将您带到超类，并在重写的方法处添加插入符号。

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

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

转到接口或实现的方法

  • 将插入符号放在接口的实现处并按。Ctrl0U

    /help/img/idea/2023.3/ws_ts_go_to_interface_from_class_name.png
    动图

    PyCharm 将带您进入接口的声明并将插入符号放在其名称处。

  • 单击实施方法图标实施方法旁边的装订线。PyCharm 将您带到相应的接口，并在已实现的方法处添加插入符号。

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

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

在 TypeScript 中重构

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

运行并调试您的应用程序

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

也可以看看

参考

特定于语言和框架的指南

外部链接