Babel编译TypeScript时无法识别?.可选链语法报错如何解决

该报错本质是当前项目的Babel编译配置缺少对ES2020新增语法的解析能力，你代码里同时用到了两个ES2020正式标准语法：

• 可选链运算符 ?.
• 空值合并运算符 ??
  如果Babel版本低于7.8.0，或是版本达标但没有开启对应语法转换规则，就会在碰到这两个符号时抛出解析异常，无法识别语法结构。

根据你项目的构建场景选择对应方案即可：

原生Babel + Webpack/Vite 类项目 #

1. 先确认核心依赖版本：确保@babel/core版本 >=7.8.0，babel-loader版本 >=8.0.0，版本不匹配先升级对应依赖。
2. 两种配置方式二选一：
   • 方式1（推荐，高版本Babel适用）：直接调整@babel/preset-env配置，不需要额外安装插件
     在babel.config.js/.babelrc中修改preset-env参数：

     module.exports = {
       presets: [
         ['@babel/preset-env', {
           bugfixes: true,
           // 根据项目需要兼容的浏览器范围配置即可
           targets: '> 0.25%, not dead'
         }],
         '@babel/preset-typescript',
         // 若使用React框架需额外添加@babel/preset-react
       ]
     }
     

   • 方式2（低版本Babel适用）：安装对应语法插件手动开启支持
     先执行安装命令：

     npm install --save-dev @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
     

     再把插件加入Babel配置：

     {
       "presets": ["@babel/preset-env", "@babel/preset-typescript"],
       "plugins": [
         "@babel/plugin-proposal-optional-chaining",
         "@babel/plugin-proposal-nullish-coalescing-operator"
       ]
     }
     

Create React App 搭建的项目 #

• 未eject配置的场景：直接把react-scripts升级到4.0及以上版本，该版本之后的官方脚手架已经内置了ES2020新语法的Babel支持，升级后不需要额外改配置即可正常编译。
• 已经eject配置的场景：按照上面原生Babel项目的方案调整配置即可。

仅用TypeScript原生编译器（TSC）做转译的项目 #

调整tsconfig.json的编译目标，让TS在编译阶段就把可选链、空值合并运算符转成低版本兼容写法，不要把这部分语法留给后续Babel处理：

{
  "compilerOptions": {
    // 配置为ES2019及以下版本时，TS会自动转译可选链、空值合并语法
    "target": "ES2019",
    "module": "ESNext",
    // 原有其他配置保持不变
  }
}

临时兼容方案 #

如果暂时不方便调整编译配置，可以把新语法改写成等价的传统判空写法绕过编译报错：

// 原写法
if (node.current?.contains(event.target) ?? false) {
  return;
}

// 等价兼容写法
const isClickInside = node.current !== null && node.current !== undefined 
  ? node.current.contains(event.target) 
  : false;
if (isClickInside) {
  return;
}

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