多语言开发插件CodeMix和Angular IDE的TypeScript支持

一时失言乱红尘 2023-06-27 03:26 55阅读 0赞

TypeScript是JavaScript的类型化超集，可编译为纯JavaScript。它是为开发大型应用程序设计的，非常适合企业发展。

本文详细介绍使用CodeMix和Angular IDE的TypeScipt支持进行开发的相关内容。如果您使用的是MyEclipse，建议将CodeMix添加到安装中以获得最新的TypeScript支持。有关CodeMix安装教程可查看[这篇文章][Link 1]  
提示：企业级Java EE开发工具MyEclipse正版授权可免费使用CodeMix多语言开发扩展插件。

**tsconfig.json**  
通常在此文件中配置的两个主要部分是编译器选项，以及要从项目配置中包含或排除的源文件。使用IntelliSense（Ctrl+Space）可帮助您指定其他参数。

![format_png][]

**注意：**TypeScript的设置在tsconfig中有描述。没有可在其上配置这些设置的其他属性或首选项页面。  
**创建TypeScript文件**  
要创建新的TypeScript源文件，请选择File > New > Other > CodeMix > TypeScript File，然后使用向导将新文件添加到项目中。  
**编辑TypeScript源**  
CodeMix提供内置的IntelliSense来改善编码体验。  
**内容辅助**  
在输入时显示内容帮助建议，不需要手动调用帮助，也可以使用Ctrl+Space查看建议。当您使用建议插入尚未导入的类时，导入也会被添加。  
当您输入方法的参数时，“文档”弹出窗口会提供可用的文档，包括参数信息的显示。

![format_png 1][]

**Peek Definition**  
将Ctrl鼠标悬停在某个字段或方法上时可以按此键查看定义，而无需更改编辑上下文。

![format_png 2][]

**Snippets**  
Snippets减少了编写通用代码甚至在某些情况下的样板代码所需的时间。这些片段包含占位符，可轻松自定义生成的代码。

![format_png 3][]

**快速修复**  
多个错误或警告可以快速修复问题，您可以单击“灯泡”或按Ctrl+1来自动修复这些问题。对于某些问题，您可以选择通过单击修复项目中的所有类似问题，或者禁用导致警告的规则。  
**重构**  
按Alt+Shift+R，或从上下文菜单调用“Rename”，以为TypeScript源代码中的符号调用重命名重构。

![format_png 4][]

您还可以执行其他重构，例如将代码提取到方法、常量等。选择要提取的源代码并按Ctrl+Shift+P，然后选择“Refactor”查看可用的重构。  
在命令面板中，您甚至可以通过对导入进行排序并删除未使用的导入来组织导入。  
**大纲和导航**  
大纲视图显示TypeScript源代码的大纲：双击视图中的条目导航到相应的符号。您还可以通过按Ctrl+O来访问快速大纲。您现在可以开始键入以筛选显示的节点并快速跳转到一个符号。

![format_png 5][]

超链接导航使您可以在文件之间或文件中跳转。将鼠标悬停在源代码上时，按Ctrl键激活超链接，单击可导航到源代码中的该位置。您还可以按F3或使用上下文菜单“Go to Definition”操作。  
**格式化和保存操作**  
按Ctrl+Shift+F或上下文菜单“Format”操作来格式化TypeScript源。要配置格式化程序，请转到Preferences > CodeMix > Settings > User Settings，然后在过滤器中键入typescript.format。根据需要调整设置。

![format_png 6][]

在保存时可能需要执行一些操作。在同一设置页面上，您可以根据需要修改以下设置：

*  editor.formatOnSave
 *  tslint.autoFixOnSave
 *  typescriptHero.imports.organizeOnSave

**构建和验证**  
**用TSLint整理**  
有了对TSLint的内置支持，只需在tslint.json文件中配置linting设置，编辑器将开始显示linting错误。TSLint报告的许多错误可以使用快速修复功能自动修复。

![format_png 7][]

**TypeScript语言验证和翻译**  
通过高级构建管道支持，TypeScript文件可通过IDE中的语言智能和外部tsc编译器（如果您选择的话）进行验证。tsc也可以用于将TypeScript转换为JavaScript。更多MyEclipse和CodeMix相信功能和教程可进入**[MyEclipse中文网][MyEclipse]**查看

[Link 1]: https://www.evget.com/article/2018/10/31/28753.html
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4ZjkzZjA0NWU1ZQ?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4Zjk3NmRkYTcwYg?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4ZjkzZmM2MDIyMg?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4Zjk0ZjNkN2Y1YQ?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4Zjk2ZjkwZmQ1OQ?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4Zjk1MDliZjZkYg?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4ZmEwN2UyNzIwMA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzIvMTZmNjU4ZmEzZmRiOGM0Mg?x-oss-process=image/format,png
[MyEclipse]: https://www.myeclipsecn.com/