TypeScript使用带条件表达式的正则提示方言不支持该如何解决

根本原因 #

JavaScript/TypeScript 遵循的 ECMAScript 正则规范原生不支持条件表达式语法，你看到的Conditionals are not supported in this regex dialect报错不是配置没开启导致的，不存在任何项目配置项可以开启原生ES的条件正则支持，哪怕把编译目标调到最新的ES2024也没有这个特性。

解决方案 #

方案1：改写正则为原生ES支持的写法（最推荐） #

你当前的正则是用来校验手机号，原有条件逻辑是判断是否匹配到左括号，再走对应的匹配分支，完全可以把条件分支拆成两个并列的普通分支实现，改写后的参考代码如下：

export const phoneRegEx = /^\+?\d*\s?(?:\(\d+\)\s?\d+(?:[-.\s]?\d)*|\d+(?:[-.\s]?\d)*)$/g;

这个正则和你原有逻辑完全等价，原生ES环境可以正常运行，不会报错。

方案2：使用支持条件正则的第三方库 #

如果你确实需要使用条件正则的复杂语法，可以引入XRegExp库，它扩展了原生正则的能力，支持条件表达式等高级特性：

1. 安装依赖

npm install xregexp
npm install @types/xregexp --save-dev

2. 使用示例

import XRegExp from 'xregexp';

export const phoneRegEx = XRegExp(/^\+?\d*\s?\(?(?(?<=\()\d+\)\s?\d+(-|\s|\.)?(?:\1?\d)*|(\.|\s|-)?(\2?\d)*)$/g);

方案3：关闭ESLint的正则校验（不推荐） #

如果仅需要消除IDE的报错提示（注意：原生环境运行这段代码依然会抛出语法错误，不建议这么做），可以在.eslintrc.json的rules里添加配置：

{
  "rules": {
    "no-invalid-regexp": "off"
  }
}

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