使用React+TypeScript运行npm start后编译失败，疑与可选链有关

在React+TypeScript项目中，使用useState管理类型为null | AuthUser的user状态时，通过可选链操作符user?.name、user?.email访问属性，执行npm start会触发编译失败，错误提示：

Failed to compile，./src/App.tsx 49:25，Module parse failed: Unexpected token (49:25)
You may need an appropriate loader to handle this file type。
改用user &&条件渲染形式后可正常运行，以下是具体解决方案：

原问题组件代码 #

import React, { useState } from "react";
import "./App.css";

type AuthUser = {
  name: string;
  email: string;
};

function App() {
  const [user, setUser] = useState<null | AuthUser>(null);
  const handleLogin = () => {
    setUser({ name: "momo", email: "momo@es.com" });
  };
  const handleLogout = () => {
    setUser(null);
  };

  return (
    <div>
      <button onClick={handleLogin}>login</button>
      <button onClick={handleLogout}>logout</button>

      <p>my name is {user?.name} </p>
      <p> my email is {user?.email}</p>
    </div>
  );
}

export default App;

替换后可正常运行的代码片段 #

{user && (
  <>
    <p>my name is {user.name} </p>
    <p> my email is {user.email}</p>
  </>
)}

解决办法 #

1. 配置Babel支持可选链特性 #

可选链是ES2020新增特性，若项目Babel未配置对应插件会导致编译失败：

• 安装Babel插件：

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

• 在.babelrc或babel.config.js中添加插件配置：

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

2. 升级Create React App版本（若使用CRA） #

旧版本Create React App默认未兼容ES2020特性，升级到最新版即可：

npm install react-scripts@latest

升级完成后重启开发服务器。

3. 调整TypeScript配置 #

确保tsconfig.json中TypeScript编译目标支持ES2020：

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"]
  }
}

修改配置后重启开发服务器或TypeScript服务。

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