ReactJS+Konva+TypeScript项目编译报错：React.Fragment语法异常

在React项目中引入TypeScript结合Konva.js后出现编译错误，无TS时项目运行正常。报错信息如下：

模块构建失败（来自./node_modules/babel-loader/lib/index.js）：
SyntaxError: /.../testProject/src/App.ts: Unexpected token, expected "," (25:10)

错误定位在React.Fragment处，尝试过用<>替代React.Fragment、重装TypeScript，但问题未解决，同时TS无法识别React及Konva.js的导出模块。

1. 配置Babel与TypeScript的适配环境 #

• 安装必要依赖：

  npm install @babel/preset-typescript @types/react @types/react-konva @types/konva --save-dev
  

• 修改babel.config.js（或.babelrc），添加TypeScript预设：

  module.exports = {
    presets: [
      '@babel/preset-react',
      '@babel/preset-env',
      '@babel/preset-typescript'
    ]
  };
  

• 配置tsconfig.json，开启React JSX编译支持：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "jsx": "react-jsx",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }
  

2. 修复代码中的语法与类型问题 #

• 修正Math.max参数错误：原代码中height: Math.max(node.height() * scaleY)缺少最小值参数，导致语法错误，修改为：

  height: Math.max(5, node.height() * scaleY)
  

• 补充类型定义：为状态变量添加明确类型，消除TS类型报错：

  interface Rectangle {
    x: number;
    y: number;
    width: number;
    height: number;
    fill: string;
    id: string;
  }
  
  const App = () => {
    const [selectedRectangle, setSelectedRectangle] = useState<Rectangle | null>(null);
    const [rectangles, setRectangles] = useState<Rectangle[]>(initialRectangles);
    const [hoveringRect, setHoveringRect] = useState<string | null>(null);
    // 其余代码保持不变
  }
  

• 规范状态更新方式：避免直接修改状态对象，handleMouseMove中应创建新对象更新：

  const handleMouseMove = (e: any) => {
    if (!drawing || !selectedRectangle) return;
    const { x, y } = e.target.getStage().getPointerPosition();
    
    const updatedRect = {
      ...selectedRectangle,
      width: x - selectedRectangle.x,
      height: y - selectedRectangle.y
    };
    setSelectedRectangle(updatedRect);
    
    const index = rectangles.findIndex(rect => rect.id === selectedRectangle.id);
    setRectangles(prev => [
      ...prev.slice(0, index),
      updatedRect,
      ...prev.slice(index + 1)
    ]);
  };
  

3. 修正文件扩展名 #

将App.ts重命名为App.tsx，因为.tsx是React+TypeScript组件的标准扩展名，只有这样Babel和TypeScript才能正确解析JSX语法。

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