TypeScript
PyCharm 支持开发、运行和调试 TypeScript 源代码。 PyCharm 识别 .ts 和 .tsx 文件，并为编辑它们提供全面的代码辅助，而无需您采取任何额外步骤。 TypeScript 文件以 
图标标记。
TypeScript 智能编码辅助包括关键字、标签、变量、参数和函数的 代码补全、 错误和语法高亮 、格式化、 大量代码检查和 快速修复 ，以及 常见和 TypeScript 特定的重构。 PyCharm 还会 即时验证 TypeScript 代码并在专用 问题工具窗口中显示错误。
编译错误会在 TypeScript tool window中报告。 了解更多信息，请参阅 Compiling TypeScript into JavaScript。
在开始之前
请确保在设置中启用了 JavaScript 和 TypeScript 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，键入 JavaScript and TypeScript。 有关插件的更多信息，请参阅 插件管理。
创建一个新应用程序
PyCharm 可以创建一个基础的 TypeScript 项目，因此您可以在最少配置的情况下设置项目。 生成的项目包含一个 package.json 、一个 tsconfig.json 和一个 index .ts 文件，带有一个 console.log() 欢迎消息。 您还可以生成一个示例 web 应用程序。
默认情况下，PyCharm会自动创建一个 Git 仓库，并 将生成的源文件置于 Git 控制之下。
点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 。 新建 项目 对话框 打开。
在左侧窗格中，选择任何面向应用程序开发的项目类型，例如 Angular CLI、React App、React Native 等。
在右侧窗格中，指定存储项目相关文件的文件夹路径。
展开 更多设置 并指定其他所需的项目选项。
从现有的 TypeScript 应用程序开始
如果您将继续开发一个现有的 TypeScript 应用，只需在 PyCharm 中打开它。 可选地 下载所需的 npm 依赖。
打开您机器上已有的应用程序源代码
点击 打开 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制中检出应用程序源代码
在 欢迎 界面上点击 克隆仓库克隆。
或者，从主菜单中选择 或 或 。
您可能会看到与您的项目相关联的其他版本控制系统，而不是在主菜单中的 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。
项目安全
当您打开一个在 PyCharm 之外创建并导入到 PyCharm 的项目时，PyCharm 会显示一个对话框，您可以在其中决定如何处理这个具有不熟悉源代码的项目。
请选择以下选项之一：
安全模式中预览 ：在这种情况下，PyCharm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试您的项目。
PyCharm 会在编辑器区域顶部显示一条通知，您可以随时点击 信任项目… 链接并加载您的项目。
信任项目 ：在这种情况下，PyCharm 会打开并加载一个项目。 这意味着项目已经初始化，项目的插件已解析，依赖项已添加，并且所有 PyCharm 功能都可用。
请勿打开 ：在这种情况下，PyCharm 不会打开项目。
请从 项目安全 了解更多。
验证 TypeScript
PyCharm 主要基于 TypeScript Language Service 的数据验证 TypeScript 代码，同时也将 TypeScript 编译成 JavaScript。
当前文件中检测到的错误描述及其快速修复方法可在编辑器和 Problems 工具窗口的 文件 选项卡中查看。
整个项目的错误及其快速修复显示在 项目错误 选项卡的 问题 工具窗口中。 若要打开工具窗口，请点击编辑器右上角的 检查 小组件：
有关详情，请参阅 在编辑器中查看问题并应用快速修复以及 问题工具窗口。
验证当前文件中的 TypeScript
在编辑器中，将鼠标悬停在突出显示的问题上。 PyCharm 显示了该问题的描述提示。
应用建议的快速修复，或点击 更多操作… 并从列表中选择相关的修复。
或者打开 文件 标签页的 问题 工具窗口 Alt+6 ，在此窗口中，您可以查看问题描述，应用快速修复，导航到源代码中出现错误的片段，并在 编辑器预览 窗格中修复它们而无需离开工具窗口。 了解更多信息，请参阅 Problems tool window。
在整个项目中验证 TypeScript
要打开 问题 工具窗口，点击编辑器右上角的 检查 小部件。
或者，从主菜单中选择 或按 Alt+6。
打开 项目错误 选项卡，该选项卡显示整个项目中的错误，错误消息按检测到的文件分组。
在这里，您可以查看问题描述，应用快速修复，导航到源代码中发生错误的片段，并在 编辑器预览 面板中修复它们，而无需离开工具窗口。 了解更多信息，请参见 Problems tool window。
配置与 TypeScript 语言服务的集成
在大多数情况下，一切功能开箱即用，无需手动配置。 但是，如果您希望使用自定义 typescript 包，或向 TypeScript 语言服务传递某些 命令行选项 ，则可以自定义默认设置。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
或者，点击 语言服务 小部件在 状态 栏上，然后点击
。
指定要使用的 Node.js 解释器。
如果您选择 项目 别名，PyCharm 将自动使用 Node 解释器 字段中 Node.js 页面的项目默认解释器。 在大多数情况下，PyCharm 会检测到项目的默认解释器并自动填写该字段。
您也可以选择另一个已配置的本地或远程解释器，或点击
并配置一个新的。在 TypeScript 字段中，指定要使用的 TypeScript 版本（PyCharm 显示当前选择的版本）。
默认情况下，将使用项目
typescript文件夹中的 node_modules 包。捆绑： 选择此选项以使用随 PyCharm 提供的
typescript软件包，而不尝试查找其他软件包。选择： 选择此选项以使用自定义
typescript包而不是 PyCharm 捆绑的包。 在打开的对话框中，选择相关包的路径。如果您的项目包管理器是 Yarn 2 ，您必须使用通过 Yarn 2 安装的
typescript包。 在这种情况下，yarn:package.json:typescript默认情况下被选中。了解更多有关 npm 和 Yarn 的包管理器的信息。
请确保选中 TypeScript 语言服务 复选框。 结果：
语法和错误高亮基于 TypeScript 语言服务的注解。
补全列表同时包含来自 TypeScript 语言服务和 PyCharm 计算的建议。
TypeScript 代码被编译成 JavaScript。
请使用下方控件配置 TypeScript 语言服务的行为。
显示项目错误 — 默认情况下，会选中该复选框，TypeScript 语言服务会检查整个项目中的代码。 检测到的错误列在 项目错误 选项卡的 问题工具窗口中，根据它们发生的文件进行分组。
为避免性能问题，请取消选中 显示项目错误 复选框，这样 TypeScript 语言服务只会在您打开文件时进行检查。 项目错误 选项卡将列出仅在您已打开的文件中检测到的错误。
显示建议 — 默认情况下，该复选框为选中状态，PyCharm 会除实际错误外显示 TypeScript 语言服务检测到的潜在问题。
启用服务驱动的类型引擎 - 选中此复选框以根据 TypeScript 编译器的数据评估符号的类型。
默认情况下，复选框是清除的，因此类型评估、解析、代码检查和重构基于 PyCharm 内部 TypeScript 引擎的类型信息。
此默认行为可能会导致性能问题以及类型解析中的错误，因为 PyCharm 内部 TypeScript 引擎使用的类型评估算法与 TypeScript 编译器的算法不同。 选择复选框可能有助于避免这些问题。
在 选项 字段中指定在未找到 tsconfig.json 文件时，传递给 TypeScript 语言服务的命令行选项。 请参阅 TSC arguments中的可接受选项列表。 请注意，
-w或--watch（监视输入文件 ）选项是无关的。
重新启动 TypeScript 语言服务
点击 语言服务 控件栏中的 状态 ，然后点击
。
本地化错误信息
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。
在 TypeScript 字段中，指定一个不同于 捆绑 的
typescript包。 这可能是typescript包，来自您的项目node_modules文件夹或其他任何位置。在 选项 字段中，输入
--locale <abbreviation of the language to use>。 当前支持韩语（ko）和日语（ja）。
编辑 TypeScript 代码
PyCharm 为 TypeScript 提供智能编码辅助，包括 上下文感知代码补全、 符号自动导入、 文档查询、 参数提示、 导航、 TypeScript 语法高亮和 linting、 重构等。
自动导入
PyCharm 可为模块、类、组件及任何其他导出的 TypeScript 符号生成导入语句。 默认情况下，PyCharm 在您完成 TypeScript 符号时会添加 import 语句。
请参阅 自动导入 了解如何优化导入语句并配置其样式。
当您键入代码或粘贴包含尚未导入的符号的片段时，PyCharm 还可以为该符号生成导入语句。 如果只有一个来源可以导入符号，PyCharm 将静默插入导入语句。 否则，请使用 自动导入工具提示或 专用导入快捷修复。
在代码完成时添加 import 语句
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。 自动导入页面打开。
在 TypeScript/JavaScript 区域中，确保选中 自动添加 TypeScript 导入 和 在代码补全时 复选框。
添加 import 语句在键入或粘贴代码时
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。 自动导入页面打开。
在 TypeScript/JavaScript 区域中，确保选中 自动添加TypeScript import 和 即时添加明确的导入 复选框。
使用自动导入工具提示
如果在完成或编辑时未添加 TypeScript 符号的 import 语句，PyCharm 会显示一个弹出窗口，建议导入该符号。 要接受建议，请按 Alt+Enter：
如果有多个可能的导入来源，PyCharm 会通知您：
在这种情况下按下 Alt+Enter 会打开一个建议列表：
要隐藏自动导入工具提示，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并清除 带有自动导入工具提示 复选框。
使用import快速修复
如果自动导入工具提示未显示，您可以随时按 Alt+Enter 并通过快速修复添加导入语句。
要生成导入，请选择 插入导入自：
如果只有一个来源可导入符号，PyCharm 会生成一个 import 语句：
如果有多个源可以导入符号，请从建议列表中选择相关的一个：
如果项目中启用了 TypeScript 语言服务，您也可以使用其建议：
配置在 import 语句中使用 type 修饰符
按下 Ctrl+Alt+S 以打开设置，然后选择 。
切换到 导入 选项卡，并在 在导入中使用类型修饰符 字段中配置在类型的导入语句中使用
type修饰符。 请注意，设置仅适用于类型，对于非类型，无论您选择哪个选项，都不会插入type修饰符。启用此选项后，如果在您的 tsconfig.json 中指定了 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true ，则会添加一个
type修饰符。否则，如果没有首选的导入类型，则不会插入
type修饰符。
使用此选项时，无论在您的 tsconfig .json 中是否指定 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true ，始终会插入
type修饰符：
使用此选项，PyCharm 永远不会使用
type修饰符，而不论 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true 标志在您的 tsconfig.json 中:
如果已经有一个带有 type 修饰符的 import 语句，此修饰符将始终用于进一步导入类型，而不论选择的选项和您的 tsconfig.json 中的设置如何。
对于常量，使用 {<constant name>} 说明符代替 type 修饰符。 对于 TypeScript 4.5 及更高版本，选中 自动 或 始终 后，所有先前的修饰符将转换为 {type} 指定符。 否则，所有现有的指定符将保持不变。
了解更多信息，请访问 TypeScript 官方网站。
配置导入语句的外观
在 设置 对话框(Ctrl+Alt+S )中，转到 ，并使用 Import 选项卡中的控件。
文档查找
PyCharm 允许您获取项目和其依赖项中的符号、外部库中定义的符号以及标准 JavaScript APIs 的引用，因为 TypeScript 实现了它们。
默认情况下，文档显示在 文档 弹出窗口中，但您始终可以在 文档工具窗口打开它，或者甚至配置它默认出现在 文档工具窗口 中。
查看快速文档
在编辑器中将鼠标悬停在所需符号上。
或者，将文本光标放置在符号处并按下 Ctrl+Q 或从主菜单中选择 。
要默认在 文档 工具窗口中打开快速文档，请在弹出窗口或工具窗口的工具栏中点击
并清除 首先显示文档弹出窗口 选项。请在弹出窗口中点击
更改字体大小、显示快速文档工具栏或转到源代码。有关更多信息，请参阅 弹出窗口中的快速文档。
您可以在工具窗口中打开特定代码元素的文档，并按照 在工具窗口中保留文档 的描述继续查看当前文件中其他元素的文档。
在工具窗口中，代码文档显示在未固定的选项卡上（标有星号符号（* ）的选项卡上）。 您可以通过将鼠标悬停在符号上或将文本光标放置在符号上来查看此文档。
在文本光标处查看 MDN 文档
对于 TypeScript 中可用的标准 JavaScript 方法，PyCharm 还会显示一个指向相应 MDN 文章 的链接。
在 文档 窗口 Ctrl+Q 中，点击 MDN 链接。
或者按下 Shift+F1 或从主菜单中选择 。
PyCharm 在 默认 PyCharm 浏览器 中打开 MDN 文章。
查看内嵌提示
内嵌提示出现在编辑器中，为您的代码提供额外信息，使其更易于阅读和导航。
内嵌提示可用于 .ts 和 .tsx 文件中。
如果启用了 TypeScript 语言服务且 TypeScript 版本为 4.4 或更高版本，则嵌入提示由 TypeScript 语言服务提供。
对于较早的 TypeScript 版本或禁用了 TypeScript 语言服务的情况，嵌入提示由内部 PyCharm 评估器提供。
与许多始终分析整个文件的检查和高亮显示不同，提示仅检索当前可见区域，并在滚动时更新。 此行为旨在提高性能。
参数提示
参数提示 显示方法和函数中的参数名称，以使您的代码更易读。
在 TypeScript 版本 5.2 及以上，参数提示在悬停时会变成链接。 点击按住 Ctrl 键的此类链接会将您带到方法定义。
配置参数提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
展开 TypeScript 下的 参数名称。
通过选择相应的复选框指定您希望显示参数提示的上下文。
预览显示了您在设置中所做的更改如何影响代码外观。
要隐藏任意上下文中任意值类型的参数提示，请取消选中 TypeScript 复选框下的 参数名称。
返回类型提示
PyCharm 能在函数调用和调用链中显示函数返回类型。
函数返回类型提示 是从 TypeScript Language Service 获取的。
方法链接中的返回类型提示 将在方法调用分割为多行并返回至少 2 种不同类型时显示。
方法链中的返回类型提示由内部 PyCharm 评估器提供。
配置函数返回类型提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 类型 下，展开 TypeScript 节点，然后选中 函数返回类型 复选框。
若要在方法链中显示返回类型提示，请展开 方法链 节点并选中 TypeScript 复选框。
预览显示了您在设置中所做的更改如何影响代码外观。
类型提示
类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 参数的类型提示显示在函数调用中。 类型提示是从 JSDoc comments 或您的代码的静态分析中推断出的。
在 TypeScript 版本 5.3 及更高版本中，类型提示在悬停时会变成链接。 点击此链接并按下 Ctrl 会让您进入类型定义。
配置类型提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
展开 。
展开 类型注解 节点，并指定您希望显示类型提示的上下文。
预览显示了您在设置中所做的更改如何影响代码外观。
若要隐藏任何上下文中任何值类型的参数类型和返回类型提示，请取消选中 TypeScript 复选框，位于 类型 下。
数字枚举值
PyCharm 为 numeric enums 提供提示，使您的代码更易于阅读。 这些提示来自 TypeScript 语言服务，默认显示。
隐藏数值枚举值
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
展开 值 节点并选择 TypeScript 复选框。 PyCharm 将隐藏提示并仅显示显式初始化常量的值。 预览显示了您在设置中所做的更改如何影响代码外观。
TypeScript 中的 JavaScript 库
在使用 TypeScript 处理 JavaScript 库时，您需要为它们 安装类型声明。 PyCharm 提醒您通过 npm 或 yarn 安装它们，并相应地更新您的 package.json 文件。
安装类型声明
将文本光标放置在警告处，然后按 Alt+Enter。
选择建议并按 Enter。
TypeScript 原生预览（TypeScript-Go）
PyCharm 通过 TypeScript 原生预览 提供基本的 TypeScript-Go 支持。
启用 TypeScript-Go 支持
在您的项目中将
@typescript/native-preview包作为依赖项安装，替代typescript包。为此，请打开 package.json ，并将
typescript替换为@typescript/native-preview。 当您将鼠标悬停在@typescript/native-preview版本上时，PyCharm 会显示一个弹窗，提示您指定的包未安装。 点击 运行 'npm install' 链接。
请在计算机其他位置安装
@typescript/native-preview，并在项目中指定其作为要使用的 TypeScript 包。为此，请执行以下操作：
在您的计算机上安装
@typescript/native-preview包，例如全局安装。在嵌入的 终端 (Alt+F12 )中，输入：
npm install --g @typescript/native-preview在 设置 对话框中（Ctrl+Alt+S ），转到 ，在 TypeScript 字段中指定
@typescript/native-preview包的路径。 如果您按照标准安装流程操作，PyCharm 将在 TypeScript 下拉列表中显示@typescript /native-preview包。
请在本地克隆并构建 TypeScript-Go 仓库 ，并在 TypeScript 字段中的 设置 | 语言与框架 | TypeScript 对话框中定位它， 如上所述。
重新设置代码格式
PyCharm 允许您根据当前的 代码样式方案 重新格式化 TypeScript 代码。
您还可以在 .editorconfig 中指定格式设置，或使用 Prettier。
装饰器
对于装饰器，在重新格式化期间抑制在每个装饰器后插入换行可能很重要。
配置装饰器
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 包装和大括号 选项卡上，选择相关的装饰器类型选项。
以下是装饰器的可用格式设置选项：
请勿换行
选择此选项时，重新格式化装饰器行时不应用换行。
如果太长则进行换行
选择此选项时，如果行超出右边距，则会换行。
右边距在 在以下位置硬包装 字段中定义，位于 设置 | 编辑器 | 代码样式 | JavaScript | 换行和大括号 中。 如果行超出指定的数字，则会换行。
如果太长就砍掉
选择此选项时，如果装饰器超出右边距，将每行格式化一个装饰器。
总是换行
选择此选项时，所有装饰器将每行格式化一个。
语法高亮
您可以根据自己的偏好和习惯配置 TypeScript-aware 语法高亮显示。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。
代码导航
您可以使用不同的操作和弹出窗口在 PyCharm 编辑器中快速浏览您的 TypeScript 项目。
转到符号声明
您可以从变量、字段、方法或任何其他符号导航到其声明或 在弹出窗口中查看符号定义 ，而无需离开正在编辑的代码。
要跳转到符号的声明位置，请将文本光标放在符号的使用位置并按 Ctrl+B 或从主菜单中选择 。
或者，使用 Ctrl+Click ：按住 Ctrl 悬停在符号上。 当该符号变为超链接时，请在不松开的情况下点击此超链接 Ctrl。
若要在弹出窗口中查看符号的定义，请将文本光标放在该符号的使用位置并按 Ctrl+Shift+I 或从主菜单中选择 。
转到符号的用法
您可以查看符号的用法列表并选择跳转到其中一个。
要获取符号用法的列表，请将文本光标放置在符号的声明处，然后执行以下操作之一：
按 Ctrl+B 或从主菜单中选择 。
按 Ctrl+Alt+F7 或从主菜单中选择 。
在弹出窗口中，使用工具栏上的图标配置列表外观并过滤掉不相关的用法，例如，在 import 语句中。
从列表中选择要跳转的符号用途，然后按 Enter。
转到符号的类型声明
您可以从变量、字段、方法或任何其他符号导航到其类型声明。 或者， 在弹出窗口中打开类型定义 ，而不跳转到类型声明。
PyCharm 还显示对象的 推断类型。 您可以在工具提示或文档弹出窗口中查看推断的类型信息。
要从符号跳转到其类型的声明，请将文本光标放置在符号的使用位置并按 Ctrl+Shift+B 或从主菜单中选择 。
要在弹出窗口中查看符号的类型定义，请将文本光标放在您要查看类型定义的符号上，然后选择 。
对于类的一个实例，这将揭示类本身，而不是定义该实例的位置。
请注意 和 之间的区别。 假设您有一个文件 app.ts ，其中包含以下代码：
如果您将文本光标放置在 dog 中 dog.bark() ，则 会将您带到 let dog = new Dog () 中变量的声明，而 会将您带到类 Dog 的声明。
查看符号的推断类型信息
按住 Ctrl 并将光标悬停在符号上。
或者，悬停在符号上。 PyCharm 会立即在 文档 弹出窗口中显示其引用。
了解更多信息，请参阅上面的 文档查找。
在子类、超类、重写和实现之间导航
您可以通过使用编辑器中的装饰图标或按下相应的快捷键来跟踪类的实现和重写方法。
转到子类
按 Ctrl+Alt+B 或点击
图标，然后从列表中选择相关的类。
或者，从主菜单中选择 或从上下文菜单中选择 ，然后从列表中选择相关的类。
转到超类或重写的方法
将文本光标放在子类上并按 Ctrl+U。 PyCharm 将您带到超类的声明处，并将文本光标放置在其名称上。
点击
覆盖方法旁的标记。 PyCharm 将您带到超类，文本光标位于被重写的方法处。
或者，将文本光标放在重写方法处，然后按 Ctrl+U 或从主菜单中选择 或从上下文菜单中选择 。
转到接口或已实现的方法
请将文本光标放在接口的实现处并按下 Ctrl+U。
PyCharm 将会带您到接口的声明处，并将文本光标定位到其名称。
点击
位于实现方法旁边的边框中。 PyCharm 将您带到相应的界面，并将文本光标定位到已实现的方法。
或者，将文本光标放在实现方法处，然后按 Ctrl+U ，或者从主菜单中选择 ，或从上下文菜单中选择 。
在 TypeScript 中重构
PyCharm 提供常见的重构过程，例如 重命名/移动等，以及特定于 TypeScript 的重构过程，例如 更改签名、 引入参数、 引入变量。 有关更多信息，请参阅 重命名重构 和 复制和移动重构。
运行和调试您的应用程序
使用 PyCharm，您可以运行和调试客户端的 TypeScript 代码以及运行在 Node.js 中的 TypeScript 代码。 了解更多信息，请参阅 运行和调试 TypeScript。