IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. TypeScript
  3. 将 TypeScript 编译为 JavaScript

最终的
将 TypeScript 编译为 JavaScript

最后修改时间：2023年10月11日

所需插件：

Javascript and TypeScript - 该插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下启用。

由于浏览器和 Node.js 仅处理 JavaScript，因此您必须在运行或调试 TypeScript 代码之前进行编译。

编译还可以生成源映射，设置 TypeScript 代码和实际执行的 JavaScript 代码之间的对应关系。

IntelliJ IDEA 附带内置的 TypeScript 编译器。默认情况下，它会在 TypeScript 文件旁边输出生成的 JavaScript 文件和源映射。

编译是通过状态工具栏上的TypeScript小部件的编译操作调用的，如下面的编译TypeScript代码中所述。

TypeScript 工具窗口中报告编译错误。此列表不受您对代码所做的更改的影响，并且只有当您再次调用编译时才会更新。

/help/img/idea/2023.2/ws_ts_toolwindow_compilation_errors.png
动图

该工具窗口仅在您第一次手动编译 TypeScript 代码后才会显示。之后，可以通过查看 |访问工具窗口。工具窗口 |主菜单上的 TypeScript或通过工具窗口栏。

在你开始之前

创建并配置 tsconfig.json 文件

默认情况下，编译器不会处理活动编辑器选项卡中的 TypeScript 文件或当前项目中的所有 TypeScript 代码。文件。

使用tsconfig.json文件，您可以修改此默认行为以生成源映射并仅编译编译范围中的文件。

创建 tsconfig.json 文件

  1. 在“项目”工具窗口中，选择TypeScript代码所在的文件夹（通常是项目根文件夹），选择“新建”|“ tsconfig.json下面的菜单然后中的文件。

  2. 要在编译期间生成源映射，请确保该sourceMap属性设置为true。

  3. 任选：

    要覆盖默认编译范围（即整个项目），请添加属性files并按以下格式键入要处理的文件的名称：

    "文件" : ["<file1.ts>","<file2.ts>"],

配置 tsconfig.json 的范围

您可能需要将不同的 TypeScript 配置评估项目中的不同文件。

如果您安排源以便每个文件夹中的所有文件都应根据相同的配置进行处理，那么这不是问题。在这种情况下，您只需为每个文件夹创建一个单独的tsconfig.json即可。

但是，如果要对存储在同一文件夹中的文件应用不同的规则，则需要创建多个配置文件并为其配置范围。

笔记

IntelliJ IDEA 不仅仅使用最近的tsconfig.*.json（来自识别为文件类型的文件列表Typescript config）。@product@ 使用最近的 tsconfig.*.json，其中以某种方式指定特定文件 - 要么在files字段中显式指定，要么通过include和exclude字段中的模式指定。

编译 TypeScript 代码

您可以手动调用编译，也可以让 IntelliJ IDEA在每次代码更改时自动编译您的代码。

或者，您可以配置构建过程，例如使用webpack、babel或其他工具。

手动编译

  1. 单击状态栏上的TypeScript小部件。

    提示

    在编辑器中打开 TypeScript 文件后，该小部件始终显示在状态栏上。

  2. 选择“编译”，然后选择以下选项之一：

    • 要编译整个应用程序的 TypeScript 代码，请选择Compile All。

      编译 TypeScript 代码

      或者，从任何打开的 TypeScript 文件的上下文菜单中选择“编译 TypeScript” 。

      从文件的上下文菜单编译 TypeScript

      提示

      您还可以按并从列表中选择编译 TypeScript 。CtrlShift0A

    • 要编译一个文件，请在编辑器中打开它，然后从TypeScript小部件的列表中选择文件的路径。

      TypeScript小组件：编译当前文件

    • 要从自定义范围编译文件，请确保它们列在tsconfig.jsonfiles的属性中，如上所述。单击状态栏上的TypeScript小部件，选择Compile ，然后选择tsconfig.json的路径。

      TypeScript 小部件：从 tsconfig.json 编译自定义范围

自动编译更改

  • 开放语言和框架| IDE 设置的 TypeScript页面，然后选中“更改时重新编译”对话框。CtrlAlt0S

也可以看看

参考

特定于语言和框架的指南

外部链接