动态导入生成.at()方法致浏览器报错，如何通过tsconfig修复？

可以通过调整tsconfig配合构建工具配置来解决这个问题，以下是具体方案：

问题根源 #

Array.prototype.at() 是ES2022新增的数组方法，你的tsconfig中lib包含esnext，会允许TypeScript使用最新的ES API，但target设为es6且未配置对应转译规则时，生成的代码会直接保留.at()方法，不支持ES2022的旧浏览器就会抛出报错。

方案一：通过tsconfig限制使用未兼容API #

修改tsconfig的lib配置，移除esnext，替换为具体的、目标浏览器支持的最高ES版本（比如es2020），这样TypeScript会在类型检查阶段就提示.at()方法不存在，避免生成包含该方法的代码：

{
  "compilerOptions": {
    // 保留其他原有配置
    "lib": ["dom", "dom.iterable", "es2020"]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

方案二：保留.at()并实现向下兼容 #

如果需要继续使用.at()方法，需调整tsconfig并配合构建工具完成转译：

1. 调整tsconfig：将target改为es2022（匹配.at()所属的ES版本），同时lib可保留esnext或改为es2022：

{
  "compilerOptions": {
    // 保留其他原有配置
    "target": "es2022"
  }
}

2. 配置构建工具转译：
   • 若使用Babel，在配置文件中启用@babel/preset-env并指定目标浏览器列表（比如通过.browserslistrc），它会自动将.at()转译为旧浏览器支持的等价代码（如array[index]）。
   • 若使用Create React App、Vite等封装好的工具，只需确保项目依赖的工具版本支持ES2022转译，或通过browserslist配置目标浏览器范围。

补充方案：引入Polyfill #

如果不想修改代码或构建配置，可以在项目入口文件中引入core-js的polyfill，为旧浏览器补上.at()方法：

import 'core-js/es/array/at';

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