如何在TypeScript/Angular项目中启用新的Map.groupBy功能？

要让Map.groupBy在项目（包括单元测试）中正常工作，需要同时满足类型支持和运行时环境支持两个核心要求，具体步骤如下：

• 升级TypeScript版本到5.4及以上
  Map.groupBy是ES2024新增的静态方法，TypeScript 5.4才内置了该方法的类型定义。检查package.json中的typescript依赖版本，若低于5.4，执行升级命令：

  npm install typescript@^5.4 --save-dev
  

• 完善TypeScript编译配置
  你已修改tsconfig.base.json的lib配置，可进一步明确指定ES版本并同步编译目标，确保类型和输出代码的兼容性：

  {
    "compilerOptions": {
      "lib": ["ES2024", "dom"],
      "target": "ES2024"
    }
  }
  

• 添加运行时Polyfill
  多数浏览器和Node.js旧版本（Node.js < 21）未原生支持Map.groupBy，需引入Polyfill：

  1. 若项目未安装core-js，执行安装命令：

     npm install core-js --save
     

  2. 在Angular的polyfills.ts文件中添加：

     import 'core-js/actual/map/group-by';
     

• 配置测试环境的Polyfill
  单元测试的运行环境（如Jest、Karma）可能未加载全局Polyfill，需单独配置：

  • 若使用Jest：在jest.config.ts中指定测试前置文件：

    export default {
      setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts']
    };
    

    然后在test-setup.ts中导入Polyfill：

    import 'core-js/actual/map/group-by';
    

  • 若使用Karma：在karma.conf.js的files数组中添加Polyfill文件，或在测试入口文件中直接导入。

• 适配Angular版本
  Angular 17及以上对ES2024的支持更完善，若使用旧版本Angular，需确保angular.json中的构建配置未强制降级ES版本，同时确认@angular/compiler-cli版本与TypeScript 5.4兼容。

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