React项目JS文件报可选链?.语法错误，修改tsconfig配置无效如何解决

你遇到的报错是代码中使用的**可选链操作符?.**未被编译工具识别导致的语法错误，该语法是ES2020版本新增的特性，结合你给出的配置，具体修复步骤如下：

• 第一步：调整tsconfig.json配置
  你当前的配置默认排除了所有JS/JSX文件，且关闭了JS文件识别，TS不会处理你的JS文件，所以调整以下配置项：
  1. 将compilerOptions.allowJs设置为true，开启TS对JS文件的编译支持
  2. 将compilerOptions.target调整为ES2020或esnext，明确支持ES2020新增语法
  3. 修改include数组，添加JS/JSX文件匹配规则：

  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./src/**/*.js",
    "./src/**/*.jsx"
  ]
  

  4. 删掉exclude数组中排除JS/JSX的两行配置
• 第二步：补充Babel编译插件（如果项目用Babel处理JS代码）
  安装可选链语法支持插件：

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

  在项目的Babel配置文件（.babelrc或babel.config.js）的plugins字段中添加该插件：

  "plugins": ["@babel/plugin-proposal-optional-chaining"]
  

• 第三步：可选升级配置
  TypeScript 3.7虽然已经原生支持可选链，但如果调整后仍有兼容问题，可以将TypeScript版本升级到4.0以上，避免版本兼容导致的异常。
• 临时验证方案
  你可以先将报错行代码替换为ES5兼容写法：currentBartagem && currentBartagem.Name || ""，如果替换后报错消失，可确认是可选链语法识别问题，再按上述步骤调整即可。

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