TypeScript
最后修改时间:2023年10月11日所需插件:
Javascript and TypeScript - 该插件仅在 IntelliJ IDEA Ultimate 中可用,默认情况下启用。
IntelliJ IDEA 支持开发、运行和调试TypeScript源代码。IntelliJ IDEA 可识别.ts和.tsx文件,并提供全方位的编码帮助来编辑它们,而无需您执行任何其他步骤。TypeScript 文件标签有图标
。
TypeScript 采集编码帮助包括关键字完成、标签、变量、参数和函数、错误和语法强调显示、格式化、大量代码检查和快速修复,以及常见和 TypeScript 特定的重构。IntelliJ IDEA 还可以动态验证 TypeScript 代码,并在专用的问题工具窗口中显示错误。
TypeScript 工具窗口中报告编译错误。从将 TypeScript 编译为 JavaScript 中了解更多信息。
在你开始之前
确保在设置中启用JavaScript 和 TypeScript 插件。按打开 IDE,然后选择插件。单击“已安装”选项卡。在搜索字段中,输入JavaScript 和 TypeScript。有关插件的更多信息,请参阅管理插件。CtrlAlt0S
创建一个新的应用程序
选择文件|新建|从主菜单进行项目或单击点击屏幕上的“新建项目”按钮。
在“新建项目”对话框中,选择右侧的“新建项目”。
在右边,选择语言区域中的JavaScript。
为新项目命名并根据需要更改其位置,然后单击“创建”。
从现有的 TypeScript 应用程序开始
如果您想继续开发现有的 TypeScript 应用程序,只需在 IntelliJ IDEA 中打开它即可。(可选)下载所需的 npm 依赖项。
打开计算机上已有的应用程序源
单击欢迎屏幕上的“打开”或“导入”,或选择“文件”|“导入”。从主菜单打开。在打开的对话框中,选择存储源的文件夹。
从版本控制中检查应用程序源
点击欢迎屏幕上的从VCS获取。
或者,选择文件 |新 |来自版本控制或 Git 的项目|从主菜单克隆...。
您可能会看到与您的项目关联的任何其他版本控制系统,而不是主菜单中的Git 。例如,Mercurial或Perforce。
在打开的对话框中,从列表中选择您的版本控制系统,并指定用于检查应用程序源的存储库。有关更多信息,请参阅查看项目(克隆)。
项目安全
当您在 IntelliJ IDEA 外部打开创建并导入其中的项目时,IntelliJ IDEA 会显示一个对话框,您可以在其中决定如何使用不熟悉的源代码处理该项目。

选择以下选项之一:
在安全模式下预览:在这种情况下,IntelliJ IDEA 以预览模式打开项目。这意味着您可以浏览项目的源代码,但无法运行任务和脚本或运行/调试项目。
IntelliJ IDEA 在编辑器区域顶部显示一条通知,您可以单击“信任项目...”链接并随时加载您的项目。
信任项目:在这种情况下,IntelliJ IDEA 打开并加载项目。这意味着项目已初始化,项目的插件已解析,依赖项已添加,并且所有 IntelliJ IDEA 功能均可用。
不要打开:在这种情况下,IntelliJ IDEA 不会打开该项目。
从项目安全中了解更多信息。
提示
从欢迎屏幕或通过文件|创建新项目|中描述的项目将自动被视为可信。
验证TypeScript
IntelliJ IDEA 主要根据来自TypeScript 服务的数据来验证 TypeScript 代码,该服务验证语言 TypeScript 编译为 JavaScript。
在当前文件中检测到的错误的描述以及这些错误的快速修复可从编辑器和“问题”工具窗口的“文件”选项卡中获得。
整个项目中的错误及其快速修复显示在“问题”工具窗口的“项目错误”选项卡中。要打开工具窗口,请单击编辑器右上角的检查小部件:
![]()
有关更多信息,请参阅编辑器和问题工具窗口中查看问题并应用快速修复。
验证当前文件中的TypeScript
在编辑器中,鼠标悬停在突出显示的问题上。IntelliJ IDEA 显示带有问题描述的工具提示。

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

或者打开“问题”工具窗口的“文件”选项卡,您可以在其中查看问题描述、应用快速修复、导航到源代码中发生错误的片段,以及在编辑器预览窗格中修复它们,而无需离开工具窗口。从问题工具窗口了解更多信息。Alt06
验证整个项目中的 TypeScript
要打开“问题”工具窗口,请单击编辑器右上角的“检查”小部件。

或者选择查看 | 工具窗口 | 出现问题请从主菜单或按。Alt06
打开“项目错误”选项卡,其中显示整个项目中的错误,以及按检测到错误的文件分组的错误消息。

在这里,您可以查看问题描述、应用快速修复、导航到源代码中发生错误的片段,以及在编辑器预览窗格中修复它们,而无需离开工具窗口。从问题工具窗口了解更多信息。
笔记
默认情况下启用检查整个项目的 TypeScript 代码。要关闭它,请打开“设置”对话框 ( ),转至语言和框架 | TypeScript,然后清除TypeScript 语言服务区域中的显示项目错误复选框。CtrlAlt0S
配置与 TypeScript 语言服务的集成
在大多数情况下,一切都是开箱即用的,不需要手动配置。但是,如果您想使用自定义typescript包或将某些命令行选项传递给 TypeScript 语言服务,则可以自定义默认设置。
在“设置”对话框 ( ) 中,转至语言和框架 | TypeScript。CtrlAlt0S
或者,单击状态栏上的TypeScript小部件并选择配置 TypeScript ...。

TypeScript页面打开。
指定要使用的 Node.js 解释器。
如果您选择项目别名,IntelliJ IDEA 将自动使用Node.js页面上的节点解释器字段中的项目默认解释器。在大多数情况下,IntelliJ IDEA 会检测项目默认解释器并填充该字段本身。
您还可以选择另一个已配置的本地或远程解释器,或者单击
并配置一个新解释器。
在TypeScript字段中,指定要使用的 TypeScript 版本(IntelliJ IDEA 显示当前选择的版本)。
默认情况下,使用
typescript项目的node_modules文件夹中的包。捆绑:选择此选项可使用
typescriptIntelliJ IDEA 附带的软件包,而无需尝试查找另一个软件包。选择:选择此选项可使用自定义
typescript包,而不是与 IntelliJ IDEA 捆绑的包。在打开的对话框中,选择相关包的路径。如果您的项目包管理器是Yarn 2,则必须使用
typescript通过 Yarn 2 安装的包。在这种情况下,yarn:package.json:typescript默认选择 。从npm 和 Yarn了解有关包管理器的更多信息。
确保选中TypeScript 语言服务复选框。
使用以下控件来配置 TypeScript 语言服务的行为。
在“选项”字段中,指定未找到tsconfig.json文件时要传递到 TypeScript 语言服务的命令行选项。请参阅TSC 参数中可接受的选项列表。请注意,
-w或--watch(监视输入文件)选项无关紧要。
提示
您可以利用 TypeScript 语言服务的建议来增强 JavaScript 文件的补全能力。为此,请添加
'allowJS' : true到jsconfig.json或tsconfig.json文件。从代码完成和配置 JavaScript 库了解更多信息。
重新启动 TypeScript 语言服务
单击状态栏上的TypeScript小部件,然后从列表中选择重新启动 TypeScript 服务。

本地化错误消息

在“设置”对话框 ( ) 中,转至语言和框架 | TypeScript。CtrlAlt0S
在TypeScript字段中,指定
typescript与Bundled不同的包。这可能是typescript来自您的项目node_modules文件夹或任何其他位置的包。在选项字段中,输入
--locale <abbreviation of the language to use>。目前支持韩语 (ko) 和日语 ( )。ja
编辑 TypeScript 代码
IntelliJ IDEA 为您带来 TypeScript 的智能编码帮助,包括上下文感知代码完成、符号自动导入、文档查找、参数提示、导航、TypeScript 感知语法突出显示和linting、重构等。
自动导入
IntelliJ IDEA 可以为导出的模块、类、组件和任何其他 TypeScript 符号生成导入语句。默认情况下,IntelliJ IDEA 在您完成 TypeScript 符号时添加导入语句。
请参阅自动导入以了解如何优化导入语句并配置其样式。
当您键入代码或粘贴带有尚未导入的符号的片段时,IntelliJ IDEA 还可以为该符号生成导入语句。如果只有一个源可以导入符号,IntelliJ IDEA 会静默插入一条导入语句。否则,请使用自动导入工具提示或专用的导入快速修复。
在代码完成时添加导入语句

在“设置”对话框 ( ) 中,转到编辑器 | 一般| 自动导入。自动导入页面打开。CtrlAlt0S
在TypeScript/JavaScript区域中,确保选中自动添加 TypeScript 导入和 代码完成复选框。
提示
要更改自动导入工具提示的背景颜色,请按并转到编辑器 | 配色方案| 一般| 弹出窗口和提示| 问题提示。CtrlAlt0S
在键入或粘贴代码时添加导入语句

在“设置”对话框 ( ) 中,转到编辑器 | 一般| 自动导入。自动导入页面打开。CtrlAlt0S
在TypeScript/JavaScript区域中,确保选中自动添加 TypeScript 导入和 动态明确导入复选框。
使用自动导入工具提示
如果在完成或编辑时未添加 TypeScript 符号的导入语句,IntelliJ IDEA 会显示一个弹出窗口,建议导入该符号。要接受建议,请按:AltEnter
如果有多个可能的导入源,IntelliJ IDEA 会通知您:

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

要隐藏自动导入工具提示,请打开“设置”对话框 ( ),转至编辑器 | 一般| 自动导入,然后清除 使用自动导入工具提示复选框。CtrlAlt0S
使用导入快速修复
如果自动导入工具提示未显示,您可以随时按并通过快速修复添加导入语句。AltEnter
要生成导入,请选择 插入导入自:

如果只有一个源可以导入符号,IntelliJ IDEA 会生成一条导入语句:

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

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

启用类型自动导入
打开tsconfig.json文件并将importNotUsedAsValues标志设置
compilerOptions为error:"importsNotUsedAsValues": "error",
从typeScript 官方网站了解更多信息。