如何在React项目中部分接入TypeScript？部署后白屏无报错如何解决？

• 根目录必须新增tsconfig.json配置文件，且需开启allowJs: true参数，允许TS、JS文件共存编译，未开启该参数会导致构建时忽略未迁移的JS组件，造成产物缺失。
• 打包工具需适配TS语法：使用官方CRA脚手架的项目无需额外修改，自定义webpack配置的项目需新增ts-loader或配置babel-loader支持.ts/.tsx后缀文件的解析。
• 补充缺失的类型声明：若项目依赖的第三方JS库没有官方@types/xxx类型包，需要在src目录下新增自定义.d.ts声明文件，避免类型校验错误中断构建或引发运行时异常。
• 构建前新增类型校验步骤：建议在package.json的build命令中前置tsc --noEmit命令，提前排查隐性类型问题，避免构建产物包含逻辑错误。

1. 部署配置校验 #

• 检查package.json中的homepage字段是否与部署路径匹配：部署在域名根目录可留空，部署在子路径需填写对应子路径，配置错误会导致静态资源引用路径错误，无法加载。
• 检查Firebase托管配置文件firebase.json的重定向规则，SPA应用需要配置所有请求重定向到index.html，否则直接访问子路由会出现白屏，参考配置如下：

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• 本地打包后直接打开build目录下的index.html，或使用serve工具本地启动build目录，确认构建产物本身可以正常运行，排除构建阶段问题。

2. TS迁移相关问题排查 #

• 本地执行tsc --noEmit命令，检查是否存在未暴露的类型错误：部分宽松配置下类型错误不会中断构建，但会导致产物运行逻辑异常。
• 检查已迁移的TS组件是否存在运行时类型错误：比如非空断言使用不当、props传递类型不匹配等隐性问题，可在开发环境开启严格类型校验逐一排查。

3. 运行时问题排查 #

• 打开部署页面的浏览器开发者工具，切换到网络面板，检查所有静态资源请求是否返回200状态码，排除资源加载失败、跨域等问题。
• 开启浏览器禁用缓存功能后重新加载页面，排除本地缓存旧版本资源的问题。
• 检查React入口文件的挂载逻辑是否正确，React18版本的根节点挂载语法和旧版本不兼容，TS语法转换时可能引发挂载失败。

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