Java开发平台IntelliJ IDEA教程：开发，运行和调试TypeScript源代码

IntelliJ IDEA是Java语言开发的集成环境，IntelliJ在业界被公认为优秀的Java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。

本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言，平台或框架结合使用。本教程将介绍如何开发，运行和调试TypeScript 源代码 。

点击下载IntelliJ IDEA最新试用版

TypeScript

请注意：此功能仅在Ultimate版本中受支持。

IntelliJ IDEA支持开发，运行和调试TypeScript 源代码。IntelliJ IDEA可识别.ts文件，并提供全方位的编码帮助，无需任何额外步骤即可对其进行编辑。TypeScript文件标有图标。

TypeScript感知编码辅助包括完成关键字，标签，变量，参数和函数，错误和语法突出显示，格式化，大量代码检查和快速修复，以及常见和特定于TypeScript的重构。IntelliJ IDEA还可以动态地验证TypeScript并将其编译为JavaScript。

验证TypeScript并将其编译为JavaScript 

IntelliJ IDEA主要基于TypeScript语言服务中的数据验证TypeScript代码，该服务还将TypeScript编译为JavaScript。

在TypeScript工具窗口的“ 错误和编译错误”选项卡中报告所有检测到的语法和编译错误。对于每个错误，IntelliJ IDEA提供简要描述以及有关其发生的行数的信息。

“ 控制台”选项卡显示自打开工具窗口以来TypeScript语言服务的日志。

配置与TypeScript语言服务的集成

1. 在“ ;设置/首选项”对话框（Ctrl+Alt+S）中，转到“ 语言和框架”| TypeScript。将打开TypeScript页面。

2. 指定要使用的Node.js解释器。这可能是一个本地Node.js的解释或适用于Linux在Windows子系统Node.js的。

3. 从TypeScript列表中 

   打开TypeScript工具窗口（View | Tool Windows | TypeScript）并切换到Errors选项卡。
   

   打开TypeScript工具窗口（View | Tool Windows | TypeScript）并切换到Compile errors选项卡。
   

   要查看对象的推断类型，请按住Ctrl鼠标指针并将其悬停在其上。

   

   在TypeScript中使用JavaScript库
   

   在TypeScript中使用JavaScript库时，需要为它们安装类型声明。IntelliJ IDEA提醒您通过npm安装它们并相应地更新您的package.json文件。

   安装类型声明

   1. 将插入符号置于警告位置并按Alt+Enter。

   2. 选择建议，然后按Enter。

   

   文档查找

   IntelliJ IDEA允许您从项目及其依赖项中获取符号，在外部库中定义符号以及标准JavaScript API，因为TypeScript实现了所有这些符号。

   文档显示在“ 文档”弹出窗口中，该弹出窗口有助于通过超链接导航到相关符号，并提供用于在已导航页面中来回移动的工具栏。

   查看插入符号的文档

   按Ctrl+Q或选择查看| 主菜单中的快速文档查找。符号的引用显示在“ 文档”弹出窗口中。
   

   对于TypeScript中可用的标准JavaScript方法，IntelliJ IDEA还显示指向相应MDN文章的链接。

   

   查看插入符号的MDN文档

   • 在“ 文档”窗口中Ctrl+Q，单击“MDN”链接。

   • 或者，按Shift+F1或选择 查看| 主菜单中的外部文档。

   IntelliJ IDEA在默认的IntelliJ IDEA浏览器中打开MDN文章 。

   重构代码

   IntelliJ IDEA提供常见的重构过程，例如重命名/移动等，以及TypeScript特定的重构过程，例如更改签名，提取参数， 提取变量。

   在TypeScript中自动导入 

   IntelliJ IDEA可以为模块，类，组件以及导出的任何其他TypeScript符号生成import语句。默认情况下，IntelliJ IDEA会在您完成TypeScript符号时添加import语句。

   当您键入代码或粘贴带有尚未导入的符号的片段时，IntelliJ IDEA还可以为此符号生成导入语句。如果只有一个源从中导入符号，IntelliJ IDEA将以静默方式插入导入语句。否则，请使用导入弹出窗口或专用导入快速修复。

   在代码完成时添加import语句 

   1. 在“ 设置/首选项”对话框（Ctrl+Alt+S）中，转到“ 编辑器”| ;一般| 自动导入。将打开“ 自动导入”页面。

   2. 在TypeScript / JavaScript区域中，选择自动添加TypeScript导入和On代码完成复选框。

   要更改导入弹出窗口的背景颜色，请按，然后Ctrl+Alt+S转到 编辑器| 配色方案| 一般| 弹出窗口和提示| 问题提示。

   在键入或粘贴代码时添加import语句

   1. 在“ 设置/首选项”对话框（Ctrl+Alt+S）中，转到“ 编辑器”| 一般| 自动导入。将打开“ 自动导入”页面。

   2. 在TypeScript / JavaScript区域中，选择自动添加TypeScript导入 和动态明确导入复选框。

   使用导入弹出窗口

   如果由于某种原因在完成或编辑时未添加TypeScript符号的import语句，IntelliJ IDEA会显示一个建议导入符号的弹出窗口。要接受该建议，请按Alt+Enter：

   

   如果有多个可能的导入源，IntelliJ IDEA会通知您：

   

   Alt+Enter 在这种情况下按下会打开一个建议列表：

   

   隐藏导入弹出窗口

   1. 在“ 设置/首选项”对话框（Ctrl+Alt+S）中，转到“ 编辑器”| 一般| 自动导入。将打开“ 自动导入”页面。

   2. 清除导入弹出复选框。

   使用导入快速修复

   您始终可以通过专用的快速修复添加导入语句：

   

   当您选择添加导入语句时， IntelliJ IDEA会添加导入：

   

   如果有多个来源导入符号，IntelliJ IDEA会显示一个建议列表：

   

   如果在项目中启用了TypeScript语言服务，您还可以使用其建议：

   

   如果要从中导入符号有多个源，则TypeScript语言服务会显示以下几个建议：

   

   相关阅读推荐：

   IntelliJ IDEA最新版本2019.2全面解析，Java 13预览等多项新功能上线 （上）

   IntelliJ IDEA最新版本2019.2全面解析，Java 13预览等多项新功能上线 （下）

   =====================================================

   想要购买IntelliJ IDEA正版授权的朋友可以。

   更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼