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

翻译|使用教程|编辑:吴园园|2019-08-29 10:41:40.487|阅读 323 次

概述:本系列教程内容为如何将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感知编码辅助包括完成关键字,标签,变量,参数和函数,错误和语法突出显示,格式化,大量代码检查和快速修复,以及常见和特定于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版本(IntelliJ IDEA显示当前选择的版本)。

    默认情况下,打字稿从项目的包node_modules文件夹中。

    捆绑:选择此选项以使用IntelliJ IDEA捆绑的typescript包,而不尝试查找另一个。

    选择:选择此选项以使用自定义打字稿包而不是与IntelliJ IDEA捆绑的打包。在打开的对话框中选择相关包的路径。

  4. 确保选中TypeScript Language Service复选框。

  5. 使用下面的控件配置TypeScript语言服务的行为。

  6. 在“ 选项”字段中 指定在找不到tsconfig.json文件时要传递给TypeScript语言服务的命令行选项。请参阅TSC参数中可接受的选项列表。请注意,-w或--watch(Watch输入文件)选项无关紧要。

您可以使用TypeScript语言服务的建议增强JavaScript文件的完成。为此,请添加'allowJS' : true到jsconfig.json或tsconfig.json文件中

监控语法错误

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

该选项卡列出了TypeScript语言服务检测到的代码中的差异。更改代码时,列表会动态更新。

默认情况下,列表仅包含活动编辑器选项卡中文件的错误,并且顶部显示该文件的完整路径。要显示整个项目中的错误,请按工具栏上的“ 显示项目错误”切换按钮 显示项目错误切换按钮

错误消息按检测到它们的文件分组。

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

要导航到相关代码,请双击相应的错误消息或选择它,然后从上下文菜单中选择“ 跳转到源 ”。

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

监视编译错误

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

单击编译所有按钮并从列表中选择编译范围时,将打开该选项卡:

默认情况下,Compile All代表整个项目中的编译所有TypeScript文件。要更改此行为,请在TypeScript页面的“ 编译范围”字段中定义另一个默认范围。

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

该选项卡列出了在所选范围中检测到的所有编译错误。此列表不受您对代码所做的更改的影响,仅在再次手动调用编译时才会更新。

错误消息按检测到它们的文件分组。 要导航到相关代码,请双击相应的错误消息或选择它,然后从上下文菜单中选择“ 跳转到源 ”。

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

查看参数提示

参数提示显示方法和函数中的参数名称,以使代码更易于阅读。 默认情况下,参数提示仅针对文字或函数表达式的值显示,但不针对命名对象显示。

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

配置参数提示

  1. 在“ 设置/首选项”对话框(Ctrl+Alt+S)中,转到“ 编辑器”| 一般| 外观。将打开“ 外观”页面。

  2. 单击“ 显示参数名称提示”复选框旁边的“ 配置”(默认情况下选中该复选框)。

  3. 在打开的“ 配置参数名称提示”对话框中,选中“ 选项”区域中的“ 显示所有参数的名称”复选框。

要隐藏所有类型值的参数提示,请清除“ 显示参数名称提示”复选框。

查看推断的类型信息

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

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

在TypeScript中使用JavaScript库

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

安装类型声明

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

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

1567049234.png

文档查找

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

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

查看插入符号的文档

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

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

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

查看插入符号的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:

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

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

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

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

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

隐藏导入弹出窗口

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

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

使用导入快速修复

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

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

当您选择添加导入语句时, IntelliJ IDEA会添加导入:

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

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

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

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

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

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

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

相关阅读推荐:

IntelliJ IDEA最新版本2019.2全面解析,Java 13预览等多项新功能上线 (上)

IntelliJ IDEA最新版本2019.2全面解析,Java 13预览等多项新功能上线 (下)

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

想要购买IntelliJ IDEA正版授权的朋友可以咨询慧都官方客服

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

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:IntelliJ IDEA https://www.jetbrains.com/help/idea/typescript-support.html

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
IntelliJ IDEA

IntelliJ在业界被公认为优秀的Java开发平台之一,在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面表现突出,并支持基于Android平台的程序开发。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat