TypeScript中replaceAll转译至ES5时未被转换引发报错的原因及解决方法

首先得明确：TypeScript本身只负责语法层面的转译，不会自动转译新增的JavaScript API（比如String.prototype.replaceAll这种原型方法）。

你的tsconfig里target: "es5"会把ES6+的语法（比如箭头函数、let/const、解构赋值）转成ES5兼容的写法，但对于replaceAll这种ES2021才加入的API，TS只是通过lib: ["ES2021"]允许你使用它的类型定义，并不会帮你把它替换成ES5能识别的代码——这属于API层面的补全，不是TS的职责范围。

解决方法有三种，按推荐度排序： #

1. 使用Polyfill（最推荐，适合大型项目）

Polyfill会给低版本环境补上缺失的API，让代码直接用原生replaceAll也能运行：

• 先安装core-js（目前最常用的Polyfill库）：

  npm install core-js
  # 或者用yarn
  yarn add core-js
  

• 在你的TS项目入口文件（比如index.ts）顶部导入Polyfill：

  // 补全所有ES2021及以下的稳定API
  import 'core-js/stable';
  // 如果你的代码用到了async/await，还要加这个补全生成器函数
  import 'regenerator-runtime/runtime';
  

这样转译后的代码在低版本环境运行时，replaceAll就会被Polyfill补上，不会报错了。

2. 手动替换为兼容的正则写法（适合小型项目或不想加依赖的场景）

把代码里的str.replaceAll(search, replacement)替换成正则全局替换的写法：

• 如果你的搜索字符串没有正则特殊字符（比如.、*、^这些），直接写：

  str.replace(new RegExp(search, 'g'), replacement);
  

• 如果搜索字符串可能包含特殊字符，要先转义，避免正则匹配出错：

  // 转译正则特殊字符
  const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const result = str.replace(new RegExp(escapedSearch, 'g'), replacement);
  

也可以封装成一个复用的函数：

function replaceAll(str: string, search: string, replacement: string): string {
  const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  return str.replace(new RegExp(escapedSearch, 'g'), replacement);
}

然后用replaceAll(str, 'a', 'b')代替原生的str.replaceAll('a', 'b')。

3. 用Babel配合TypeScript转译API（适合已经在用Babel的项目）

如果你的项目已经集成了Babel，可以让它来负责API的转译：

• 安装必要依赖：

  npm install @babel/core @babel/preset-env @babel/preset-typescript --save-dev
  

• 创建babel.config.json配置文件：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "11" // 根据你的目标运行环境调整，比如支持到IE11
        },
        "useBuiltIns": "usage", // 自动按需注入Polyfill
        "corejs": 3 // 指定core-js版本
      }],
      "@babel/preset-typescript"
    ]
  }
  

这样Babel会根据你指定的目标环境，自动把replaceAll转译成ES5兼容的代码，同时按需注入Polyfill。

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