如何在现有React-TypeScript项目中启用ES13/ES2022特性

问题原因 #

修改tsconfig.json中的module字段仅能调整TypeScript的模块解析逻辑，既不会让TypeScript自动注入缺失的JS API polyfill，也不会改变最终运行环境对ES2022特性的支持程度。
出现TypeError: arr.at is not a function的核心原因是：你当前项目的实际运行环境（浏览器内核、Node.js版本、构建工具的降级转译规则）没有提供Array.prototype.at的实现。

解决方法 #

根据项目兼容需求选择对应方案即可：

• 方案1：升级环境到原生支持版本（无低版本兼容需求时首选）
  直接将运行环境升级到原生支持.at()的版本，不需要额外配置：

  • 浏览器环境：Chrome 92+、Firefox 90+、Safari 15.4+、Edge 92+
  • Node.js环境：16.6.0及以上版本
    如果是Create React App搭建的项目，将react-scripts升级到v5及以上版本，默认构建目标已覆盖支持ES2022的环境，不会主动转译移除.at()调用。

• 方案2：补全TypeScript编译配置（解决TS类型报错）
  除了module字段，还需要同步修改tsconfig.json中的target和lib字段，让TypeScript正确识别ES2022的API类型：

  {
    "compilerOptions": {
      "target": "ES2022",
      "module": "ES2022",
      "lib": ["ES2022", "DOM", "DOM.Iterable"]
      // 其余原有配置保持不变
    }
  }
  

  注意：该配置仅解决TS层面的类型校验问题，不会补全运行时缺失的API，低版本环境仍需配合polyfill使用。

• 方案3：注入polyfill（需兼容低版本环境时使用）
  通过core-js注入对应API的polyfill即可兼容低版本环境：

  1. 安装依赖：

     npm install core-js@3 --save
     

  2. 在项目入口文件（通常是src/index.tsx）的最顶部引入对应polyfill：

     import 'core-js/actual/array/at';
     // 后续正常写入口业务代码
     

  如果项目使用Babel做转译，也可以配置@babel/preset-env的useBuiltIns: 'usage'，构建时会自动根据配置的兼容目标按需注入polyfill，无需手动引入。

• 方案4：临时兼容写法（快速验证场景）
  不想调整全局配置的话，可以手动封装等价方法临时替代.at()的能力：

  function getArrItem<T>(arr: T[], index: number): T {
    return index < 0 ? arr[arr.length + index] : arr[index]
  }
  
  // 调用示例
  const fruitsArray = ['banana', 'apple', 'orange', 'kiwi'];
  console.log(getArrItem(fruitsArray, -1)) // 输出kiwi
  

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