TypeScript
PyCharm 支持开发、运行和调试 TypeScript 源代码。 PyCharm 能识别 .ts 和 .tsx 文件，并为编辑它们提供完整的编码辅助，无需您执行任何其他步骤。 TypeScript 文件以 
图标标记。
TypeScript 感知的编码辅助包括用于关键字、标签、变量、参数和函数的 补全、 错误和语法高亮 、格式化、 众多代码检查和 快速修复 ，以及 通用和 TypeScript 特定的重构。 PyCharm 还会即时 验证 TypeScript 代码 ，并在专用的 问题工具窗口 中显示错误。
编译错误会在 TypeScript 工具窗口 中报告。 请参阅 将 TypeScript 编译为 JavaScript 了解详情。
开始之前
请确保在设置中启用了 JavaScript 和 TypeScript 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 JavaScript and TypeScript。 有关插件的更多信息，请参阅 管理插件。
创建新应用
PyCharm 可以创建基本的 TypeScript 项目，使您以最少的配置即可设置项目。 生成的项目包含一个 package.json 、一个 tsconfig.json ，以及一个带有 console.log() 欢迎消息的 index .ts 文件。 您还可以额外生成示例 Web 应用。
默认情况下，PyCharm 会自动创建 Git 仓库，并 将生成的源代码置于 Git 版本控制之下。
在主菜单中选择 。 或者，在欢迎屏幕的左侧窗格中点击 。
将打开 新建 项目 对话框。
在左侧窗格中，选择任何面向应用开发的项目类型，例如 Angular CLI、React App、React Native 等。
在右侧窗格中，指定用于存储项目相关文件的文件夹路径。
展开 更多设置 并指定其他必需的项目选项。
从现有的 TypeScript 应用开始
如果您将继续开发现有的 TypeScript 应用，只需在 PyCharm 中打开它即可。 您也可以选择 下载所需的 npm 依赖项。
打开已在您计算机上的应用源代码
在 欢迎 屏幕的左侧窗格中点击 打开 ，或在主菜单中选择 。 在打开的对话框中，选择存放您源代码的文件夹。
从您的版本控制检出应用源代码
在 欢迎 屏幕的左侧窗格中点击 克隆。
或者，在主菜单中选择 或 或 。
在主菜单中，您可能会看到与项目关联的其他版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要检出的应用源代码的存储库。 有关详细信息，请参阅 检出项目（克隆）。
项目安全
当您打开在 PyCharm 之外创建并导入到其中的项目时，PyCharm 会显示一个对话框，您可以在其中决定如何处理包含不熟悉源代码的该项目。
请选择以下选项之一：
在安全模式中预览 ：在这种情况下，PyCharm 会以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试您的项目。
PyCharm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在这种情况下，PyCharm 会打开并加载项目。 这意味着项目已初始化、项目的插件已解析、依赖项已添加，并且所有 PyCharm 功能均可用。
不打开 ：在这种情况下，PyCharm 不会打开该项目。
详细信息请参阅 项目安全性。
验证 TypeScript
PyCharm 主要基于 TypeScript 语言服务 的数据验证 TypeScript 代码，该服务还会将 TypeScript 编译为 JavaScript。
当前文件中检测到的错误描述及其快速修复，可在编辑器以及 问题 工具窗口的 文件 选项卡中获得。
整个项目中的错误及其快速修复会显示在 问题 工具窗口的 项目错误 选项卡中。 要打开该工具窗口，请点击编辑器右上角的 检查 小部件：
有关详细信息，请参阅 在编辑器中查看问题并应用快速修复 和 问题工具窗口。
在当前文件中验证 TypeScript
在编辑器中，将鼠标悬停在高亮问题上。 PyCharm 会显示包含问题描述的工具提示。
应用建议的快速修复，或点击 更多操作… 并从列表中选择相应的修复。
或者，打开 问题 工具窗口的 文件 选项卡 Alt+6 ，您可以在其中查看问题描述、应用快速修复、导航到源代码中发生错误的片段，并在 编辑器预览 窗格中直接修复它们，无需离开该工具窗口。 详细了解请参阅 问题工具窗口。
在整个项目中验证 TypeScript
要打开 问题 工具窗口，请点击编辑器右上角的 检查 小部件。
或者，在主菜单中选择 ，或按 Alt+6。
打开 项目错误 选项卡，其中显示整个项目中的错误，并按检测到错误的文件分组显示错误消息。
在此，您可以查看问题描述、应用快速修复、导航到源代码中发生错误的片段，并在 编辑器预览 窗格中直接修复它们，而无需离开该工具窗口。 详细了解请参阅 问题工具窗口。
配置与 TypeScript 语言服务的集成
在大多数情况下，一切都可即开即用，无需手动配置。 但是，如果您希望使用自定义的 typescript 包，或向 TypeScript 语言服务传递一些 命令行选项 ，则可以自定义默认设置。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
或者，点击 状态 栏上的 语言服务 小部件，然后点击
。
将打开 TypeScript 页面。
指定要使用的 Node.js 运行时。
如果选择 项目 别名，PyCharm 将自动使用 JavaScript 运行时 页面中 Node 运行时 字段指定的项目默认解释器。 在大多数情况下， PyCharm 会检测到项目默认运行时，并自动填充该字段。
您还可以选择其他已配置的本地或远程解释器，或点击
来配置一个新的解释器。在 TypeScript 字段中，指定要使用的 TypeScript 版本（PyCharm 显示当前选择的版本）。
默认情况下，使用来自项目 node_modules 文件夹的
typescript包。内置： 选择此选项以使用随 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 参数。 请注意，
-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 将静默插入导入语句。 否则，请使用 自动导入工具提示或 专用导入快捷修复。
在代码补全时添加导入语句
在 设置 对话框（Ctrl+Alt+S ）中，转到 。 将打开 Auto Import 页面。
在 TypeScript/JavaScript 区域中，确保选中 自动添加 TypeScript 导入 和 在代码补全时 复选框。
在键入或粘贴代码时添加导入语句
在 设置 对话框（Ctrl+Alt+S ）中，转到 。 将打开 Auto Import 页面。
在 TypeScript/JavaScript 区域中，确保选中 自动添加TypeScript import 和 即时添加无歧义的导入 复选框。
使用自动导入工具提示
如果在完成或编辑时未添加 TypeScript 符号的 import 语句，PyCharm 会显示一个弹出窗口，建议导入该符号。 要接受建议，请按 Alt+Enter：
如果有多个可能的导入来源，PyCharm 会通知您：
在这种情况下按下 Alt+Enter 会打开一个建议列表：
要隐藏自动导入工具提示，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并清除 使用自动导入工具提示 复选框。
使用导入快速修复
如果自动导入工具提示未显示，您可以随时按 Alt+Enter 并通过快速修复添加导入语句。
要生成导入，请选择 从以下位置插入导入：
如果只有一个来源可导入符号，PyCharm 会生成一个 import 语句：
如果有多个源可以导入符号，请从建议列表中选择相关的一个：
如果您的项目启用了 TypeScript 语言服务，您也可以使用其建议：
配置在导入语句中使用 type 修饰符
按下 Ctrl+Alt+S 打开设置，然后选择 。
切换到 导入 选项卡，并在 在导入中使用 type 修饰符 字段中配置在类型的导入语句中使用
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 实现了它们。
默认情况下，文档显示在 文档 弹出窗口中，但您始终可以在 Documentation 工具窗口 中打开，甚至可以将其配置为默认在 文档工具窗口 中显示。
查看快速文档
在编辑器中将鼠标悬停在所需的符号上。
或者，将文本光标放置在符号处并按下 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 注释 或对您的代码的静态分析中推断。
在 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 ），然后转到 。
在 换行和大括号 选项卡上，选择相关的装饰器类型选项。
装饰器可用以下格式设置：
不换行
选择此选项时，重新格式化包含装饰器的行时不应用换行。
过长时换行
选择此选项时，若行超出右边距则换行。
右边距在 Settings | Editor | Code Style | JavaScript | Wrapping and Braces 上的 硬换行位置 字段中定义。 如果该行超出指定数值，则会换行。
过长时分行
选择此选项时，当超出右边距时，装饰器将按每行一个的方式进行格式化。
始终换行
选择此选项时，所有装饰器都将按每行一个的方式进行格式化。
语法高亮
您可以根据自己的偏好和习惯配置 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。