打字稿
PhpStorm 支持开发、运行和调试TypeScript源代码。PhpStorm 可识别.ts和.tsx文件,并为编辑它们提供全方位的编码帮助,无需您执行任何额外步骤。TypeScript 文件标有图标。
支持 TypeScript 的编码帮助包括关键字、标签、变量、参数和函数的补全、错误和语法突出显示、格式化、大量代码检查和快速修复,以及常见的和特定于 TypeScript 的重构。PhpStorm 还即时验证 TypeScript 代码,并在专用的问题工具窗口中显示错误。
在TypeScript 工具窗口中报告编译错误。从将 TypeScript 编译成 JavaScript了解更多信息。
在你开始前
确保在Settings/Preferences |上启用了JavaScript 和 TypeScript插件。插件页面,标签Installed。有关详细信息,请参阅管理插件。
验证 TypeScript
PhpStorm 主要基于来自TypeScript 语言服务的数据来验证 TypeScript 代码,该服务还将 TypeScript 编译成 JavaScript。
当前文件中检测到的错误的描述和它们的快速修复可从编辑器和“问题”工具窗口的“当前文件”选项卡中获得。
整个项目的错误及其快速修复显示在“问题”工具窗口的“项目错误”选项卡中。要打开工具窗口,请单击编辑器右上角的检查小部件:
有关详细信息,请参阅在编辑器和问题工具窗口中查看问题并应用快速修复。
验证当前文件中的 TypeScript
在编辑器中,将鼠标指针悬停在突出显示的问题上。PhpStorm 显示带有问题描述的工具提示。
应用建议的快速修复或单击更多操作并从列表中选择相关的操作。
或者打开问题工具窗口的当前文件选项卡,您可以在其中查看问题描述、应用快速修复、导航到源代码中发生错误的片段,以及在编辑器预览窗格中修复它们而无需离开工具窗户。从问题工具窗口了解更多信息。Alt+6
在整个项目中验证 TypeScript
要打开问题工具窗口,请单击编辑器右上角的检查小部件。
或者选择
主菜单中的 Alt+6或按。打开项目错误选项卡,该选项卡显示整个项目中的错误,错误消息按检测到的文件分组。
在这里,您可以查看问题描述、应用快速修复、导航到源代码中发生错误的片段,以及在编辑器预览窗格中修复它们,而无需离开工具窗口。从问题工具窗口了解更多信息。
配置与 TypeScript 语言服务的集成
在大多数情况下,一切都是开箱即用的,不需要手动配置。但是,如果您想使用自定义typescript
包或将一些命令行选项传递给 TypeScript 语言服务,您可以自定义默认设置。
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 。
或者,单击状态栏上的TypeScript小部件,然后选择配置 TypeScript。
指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或Windows Subsystem for Linux 上的Node.js。
在TypeScript字段中,指定要使用的 TypeScript 版本(PhpStorm 显示当前选择的版本)。
默认情况下,
typescript
使用项目的node_modules文件夹中的包。捆绑:选择此选项以使用
typescript
PhpStorm 附带的包,而无需尝试查找另一个包。选择:选择此选项以使用自定义
typescript
包而不是与 PhpStorm 捆绑的包。在打开的对话框中,选择相关包的路径。如果你的项目包管理器是Yarn 2,你必须使用
typescript
通过 Yarn 2 安装的包。在这种情况下,yarn:package.json:typescript
默认选中。从npm 和 Yarn了解更多关于包管理器的信息。
确保选中TypeScript 语言服务复选框。
使用下面的控件来配置 TypeScript 语言服务的行为。
在选项字段中,指定在找不到 tsconfig.json文件时要传递给 TypeScript 语言服务的命令行选项。请参阅TSC 参数中的可接受选项列表。请注意,
-w
或--watch
(Watch input files)选项无关紧要。
重启 TypeScript 语言服务
单击状态栏上的TypeScript小部件,然后从列表中选择重新启动 {0} 。
编辑 TypeScript 代码
PhpStorm 为您提供 TypeScript 的智能编码帮助,包括上下文感知代码完成、符号自动导入、文档查找、参数提示、导航、TypeScript 感知语法突出显示和linting、重构等。
自动导入
PhpStorm 可以为模块、类、组件和任何其他导出的 TypeScript 符号生成导入语句。默认情况下,PhpStorm 在您完成 TypeScript 符号时添加导入语句。
请参阅自动导入以了解如何优化导入语句并配置其样式。
当您键入代码或粘贴带有尚未导入符号的片段时,PhpStorm 还可以为此符号生成导入语句。如果只有一个源可以从中导入符号,PhpStorm 会静默插入导入语句。否则,请使用自动导入工具提示或专用导入快速修复。
在代码完成时添加导入语句
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 。自动导入页面打开。
在TypeScript/JavaScript区域中,选中自动添加 TypeScript 导入和代码完成复选框。
在键入或粘贴代码时添加导入语句
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 。自动导入页面打开。
在TypeScript/JavaScript区域中,选中Add TypeScript imports automatically和Unambiguous imports on the fly复选框。
使用自动导入工具提示
如果在完成或编辑时未添加 TypeScript 符号的导入语句,PhpStorm 会显示一个弹出窗口,建议导入该符号。
要接受建议,请按Alt+Enter:
如果有多个可能的导入来源,PhpStorm 会通知您:
在这种情况下按下Alt+Enter会打开一个建议列表:
要隐藏自动导入工具提示,请打开设置/首选项对话框 ( Ctrl+Alt+S),转到 ,并清除With auto-import tooltip复选框。
使用导入快速修复
如果未显示自动导入工具提示,您始终可以通过专用快速修复添加导入语句。
要生成导入,请选择添加导入语句:
如果只有一个源可以从中导入符号,PhpStorm 会生成一个导入语句:
如果要从多个源导入符号,请从建议列表中选择相关的一个:
如果你的项目中启用了 TypeScript 语言服务,你也可以使用它的建议:
如果要从多个源导入符号,请从 TypeScript 语言服务显示的列表中选择相关的一个:
启用类型自动导入
打开您的tsconfig.json文件并将importsNotUsedAsValues标志设置
compilerOptions
为error
:"importsNotUsedAsValues": "错误",
从typeScript 官方网站了解更多信息。
配置导入语句的外观
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 ,并使用Imports选项卡中的控件。有关详细信息,请参阅导入选项卡。
文档查找
PhpStorm 允许您从项目及其依赖项中获取符号、外部库中定义的符号以及标准 JavaScript API 的引用,因为 TypeScript 实现了所有这些。
文档显示在文档弹出窗口中,该弹出窗口有助于通过超链接导航到相关符号,并提供一个工具栏,用于在已导航的页面中来回移动。
查看符号的文档
将插入符号放在符号上,然后按Ctrl+Q或选择
。当您将鼠标指针悬停在符号上时,PhpStorm 会立即在文档弹出窗口中显示它的引用。
您可以关闭此行为或将弹出窗口配置为更快或更慢,请参阅下面的配置文档弹出窗口的行为。
对于 TypeScript 中可用的标准 JavaScript 方法,PhpStorm 还显示了指向相应MDN 文章的链接。
配置文档弹出的行为
要关闭自动显示文档,请打开Settings/Preferences对话框 ( Ctrl+Alt+S),转到 ,并清除Show quick documentation on hover复选框。
要更快或更慢地显示文档弹出窗口,请打开设置/首选项对话框 ( Ctrl+Alt+S),转到 ,然后选择Show the documentation popup复选框并指定延迟时间。
查看 MDN 文档以获取插入符号处的符号
在“文档”窗口Ctrl+Q中,单击 MDN 链接。
或者,按Shift+F1或选择
。
PhpStorm 在默认的 PhpStorm 浏览器中打开 MDN 文章 。
查看镶嵌提示
嵌入提示出现在编辑器中,并为您提供有关代码的其他信息,以使其更易于阅读。
启用镶嵌提示
打开设置/首选项对话框 ( Ctrl+Alt+S),转到TypeScript旁边的复选框。
在下面的TypeScript页面上,指定您希望 PhpStorm 显示的提示和上下文。
参数提示
参数提示显示方法和函数中的参数名称,使您的代码更易于阅读。默认情况下,参数提示仅显示为文字或函数表达式的值,而不显示命名对象。
配置参数提示
打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到 。
从列表中选择参数提示,确保选中显示参数提示复选框,然后指定要显示参数提示的上下文。
下面的预览显示了您在设置中所做的更改如何影响代码外观。
对于某些方法和函数,PhpStorm 不会在任何上下文中显示参数提示。单击排除列表...查看这些方法和函数,可能为它们启用参数提示,或将新项目添加到列表中。
返回类型提示
链式方法的返回类型提示是从JSDoc 注释或基于代码的静态分析推断出来的。默认情况下,返回类型提示会显示为在多行之间拆分并返回至少 2 种不同类型的链式方法。
配置方法返回类型提示
打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到 。
从列表中选择调用链中的方法返回类型,确保选中显示提示复选框,然后指定要显示返回类型提示的调用链中不同类型的最小数量。
下面的预览显示了您在设置中所做的更改如何影响代码外观。
输入提示
类型注释在其定义旁边显示变量类型或函数返回类型。类型注释是从JSDoc 注释或代码的静态分析中推断出来的。
配置类型提示
打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到 。
从列表中选择类型注释,确保选中显示类型提示复选框,然后指定要显示类型提示的上下文。
下面的预览显示了您在设置中所做的更改如何影响代码外观。
数字枚举值
默认情况下,PhpStorm 显示数字枚举的推断值,以使您的代码更易于阅读。
隐藏数字枚举值
打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到 。
从列表中选择Numeric enum values并清除Show hints复选框。推断的值是隐藏的,只显示显式初始化的常量的值。
下面的预览显示了您在设置中所做的更改如何影响代码外观。
TypeScript 中的 JavaScript 库
在 TypeScript 中使用 JavaScript 库时,您需要为它们安装类型声明。PhpStorm 会提醒您通过npm或yarn安装它们,并相应地更新您的package.json文件。
安装类型声明
将插入符号放在警告处,然后按Alt+Enter。
选择建议并按Enter。
语法高亮
您可以根据自己的喜好和习惯配置可识别 TypeScript 的语法突出显示。
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 。
选择配色方案,接受从默认值继承的突出显示设置,或按照颜色和字体中的说明自定义它们。
代码导航
您可以使用不同的操作和弹出窗口在 PhpStorm 编辑器中快速浏览您的 TypeScript 项目。
转到符号的声明
您可以从变量、字段、方法或任何其他符号导航到其声明,或在弹出窗口中查看符号定义,而无需从您正在编辑的代码中跳转到任何地方。
要跳转到符号的声明,请将插入符号放在符号的使用处,然后按Ctrl+B或选择
。或者,使用Ctrl+Click:Ctrl按住,将鼠标指针悬停在符号上。当符号变为超链接时,单击超链接而不释放Ctrl。
转到符号的用法
您可以查看符号的用法列表并选择要跳转到的符号。
要获取符号的用法列表,请将插入符号放在符号的声明中并执行以下操作之一:
按Ctrl+B或选择
。按Ctrl+Alt+F7或选择
从主菜单
从列表中,选择要跳转的符号的用法。
转到符号的类型声明
您可以从变量、字段、方法或任何其他符号导航到其类型声明。或者,在弹出窗口中打开类型定义而不跳转到类型声明。
PhpStorm 还显示了对象的推断类型。您可以在工具提示或文档弹出窗口中查看推断的类型信息。
跳转到类型声明
要从符号跳转到其类型的声明,请将插入符号放在符号的使用处,然后按Ctrl+Shift+B或选择
从主菜单中输入要在弹出窗口中查看符号的类型定义,请将插入符号放在要查看其类型定义的符号上,然后选择
。对于类的实例,这将显示类本身,而不是定义该实例的位置。
查看符号的推断类型信息
按住Ctrl鼠标指针并将其悬停在符号上。
或者,将鼠标指针悬停在符号上。PhpStorm 立即在文档弹出窗口中显示它的参考。
从上面的文档查找中了解更多信息。
app.ts :
和 之间的区别。假设您有一个包含以下代码的文件dog
in dog.bark()
,则 会将您带到变量 in 的声明let dog = new Dog ()
,而 会将您带到类的声明Dog
。在子类、超类、覆盖和实现之间导航
您可以使用编辑器中的装订线图标或按相应的快捷方式来跟踪类实现和覆盖方法。
转到子类
按下Ctrl+Alt+B或单击装订线,然后从列表中选择相关类。
或者,选择
从主菜单或 ,然后从列表中选择相关类。
转到超类或重写方法
将插入符号放在子类上并按Ctrl+U。PhpStorm 将您带到超类的声明并将光标定位在其名称上。
单击覆盖方法旁边的装订线。PhpStorm 将光标带到被覆盖方法上的超类。
或者,将插入符号放在覆盖方法上,然后按Ctrl+U或选择
主菜单中的 。
转到接口或实现的方法
将插入符号放在接口的实现上,按Ctrl+U,然后选择要转到的接口。
PhpStorm 将您带到接口的声明并将光标定位在其名称上。
单击实施方法旁边的装订线。PhpStorm 将光标置于已实现的方法上,带您进入相应的界面。
或者,将插入符号放在实现方法上,然后按Ctrl+U或选择
主菜单中的 。
TypeScript 中的重构
PhpStorm 提供了常见的重构过程,如rename/move等,以及特定于 TypeScript 的重构过程,如更改签名、引入参数、引入变量。有关详细信息,请参阅重命名重构、移动重构和重构 TypeScript。
运行和调试您的应用程序
使用 PhpStorm,您可以运行和调试客户端 TypeScript 代码和在 Node.js 中运行的 TypeScript 代码。从运行和调试 TypeScript中了解更多信息。