这个报错 Expected ";" but found "User" 并不是 TypeScript 的类型语法错了，而是 React 组件里不能直接写 interface！
我直接给你指出两个错误，并告诉你为什么报错，一步到位修复👇
一、第一个错误（报红的根本原因）
在 React 函数组件内部，不能直接写 interface
因为 JSX 语法里，组件的 return 之前是 JS 表达式环境，不能直接定义接口。
❌ 你写的：
export default function App (){interface User{ ... } // ❌ 报错！在组件内部不能直接写 interfaceconst [user, setuser] = useState<User>({});...
}
✅ 正确位置：在组件外部定义
interface User{name: string;age: number;
}export default function App (){const [user, setuser] = useState<User>({});...
}
二、第二个错误（修复后还会报错）
不能把对象直接渲染 {user}
<div> {user} </div> // ❌ 报错！对象不能直接渲染成字符串
✅ 写法：
- 显示单个属性
<div> {user.name} </div>
- 或用
JSON.stringify调试
<div> {JSON.stringify(user)} </div>
三、修复后的完整代码（直接复制运行）
import { useState } from "react";// 1. 接口定义在组件外部 ✅
interface User {name: string;age: number;
}export default function App() {// 2. 初始化空对象 ✅const [user, setUser] = useState<User>({});// 3. 渲染对象属性 ✅return (<div><p>姓名：{user.name}</p><p>年龄：{user.age}</p></div>);
}
四、为什么一开始报 "Expected ; but found User"？
因为 React 解析到 interface 时，以为你在写 JSX 内容，但 JSX 里只能放标签/表达式，不能放 TypeScript 接口声明，所以编译器直接懵了，认为你少了分号。
五、进阶：如何正确初始化空对象？
你传 {} 会报错，因为 {} 不满足 User 类型。
写法 A：使用类型断言（推荐）
const [user, setUser] = useState<User>({} as User);
写法 B：让属性可选
interface User {name?: string;age?: number;
}
const [user, setUser] = useState<User>({});