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