TypeScript编译async/await生成大量JS代码 调整配置无效是否正常？

当编译目标target配置低于ES2017时，输出大量辅助函数属于正常现象。TypeScript 为了兼容不原生支持async/await语法的低版本JavaScript运行环境，会自动注入__awaiter、__generator这类polyfill辅助函数来实现相同的逻辑效果。

你修改配置后没有生效，可对照以下内容排查问题：

• 先确认target配置是否生效

  1. 检查tsconfig.json的compilerOptions.target字段是否设置为ES2017或更高版本（比如ES2020、ESNext），只要运行环境支持ES2017及以上规范，设置后编译输出的代码会直接保留原生async语法，不会生成冗余辅助函数。
  2. 确认编译时没有被其他参数覆盖配置：如果是命令行调用tsc，检查是否额外加了--target参数；如果是用webpack、vite等构建工具，检查是否有其他配置覆盖了tsconfig的target设置。

• 关于noEmitHelpers配置的说明
  单独设置noEmitHelpers: true不会让辅助函数消失，它的作用只是禁止在当前文件内输出辅助函数代码。如果需要在低版本target下避免每个文件重复生成辅助函数，需要同时做两个配置：

  1. 安装依赖tslib：npm install tslib --save
  2. 在tsconfig中新增importHelpers: true
     配置后TypeScript会统一从tslib中引入公用的辅助函数，大幅减少重复代码体积。

配置示例 #

面向高版本运行环境（推荐，代码最简洁） #

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext"
  }
}

对应编译输出结果：

"use strict";
export async function f(msg) {
}

面向低版本运行环境（减少重复代码） #

{
  "compilerOptions": {
    "target": "ES5",
    "noEmitHelpers": true,
    "importHelpers": true
  }
}

内容的提问来源于stack exchange，提问作者Houcem Eddine