NodeJS+Express中TypeScript运行React-pdf遇编译错误求解决方案

以下是针对你遇到的TS编译失败问题的具体解决方案：

• 补全React类型依赖
  @react-pdf/renderer依赖React的类型定义，缺失会导致编译报错。执行以下命令安装：

  npm install @types/react @types/react-dom --save-dev
  

• 调整TypeScript配置
  修改tsconfig.json的compilerOptions，适配@react-pdf的语法和类型检查：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // 适配React 17+自动JSX runtime
      "skipLibCheck": true, // 跳过第三方库的类型检查（解决@react-pdf依赖的类型不兼容问题）
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "target": "ES2020",
      "module": "CommonJS",
      "outDir": "./dist",
      "rootDir": "./src"
    },
    "include": ["src/**/*"]
  }
  

• 同步Babel与TS的JSX配置
  如果你用Babel配合TS编译，确保babel.config.json中React预设的runtime配置和TS一致：

  {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-typescript",
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
  }
  

• 验证版本兼容性
  确认@react-pdf/renderer版本和你的React、TypeScript版本匹配：

  • @react-pdf/renderer v3.x+ 需要React 16.8+，TypeScript 4.0+
  • 若版本不兼容，可升级TS或降级@react-pdf到适配版本

这些调整应该能解决JS版本正常但TS编译报错的问题，本质是补全类型依赖、跳过第三方库的类型冲突，以及同步编译工具的JSX处理逻辑。

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