React 18项目添加tsconfig.json后出现文件覆盖错误，求解决方法

这个错误的核心原因是TypeScript编译器将vite.config.js纳入了编译输入范围，同时计划将编译输出写入同一文件路径，引发覆盖冲突——毕竟你的项目原本是纯JavaScript创建的，添加tsconfig.json后TS默认会扫描处理项目中的JS文件，而vite配置文件根本不需要被TS编译。

以下是几种可行的解决方法：

方法1：精准控制TS的文件扫描范围 #

修改tsconfig.json，通过include指定需要编译的文件，用exclude排除不需要处理的文件（比如vite.config.js）：

{
  "compilerOptions": {
    // 保留你已有的编译选项，比如target、module等
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "vite.config.js"]
}

这样TS只会处理src目录下的文件，完全忽略vite配置文件，从根源避免冲突。

方法2：仅用TS做类型检查，不生成输出文件 #

如果你的需求只是用TS做代码类型校验，不需要生成编译后的JS文件，直接启用noEmit选项：

{
  "compilerOptions": {
    "noEmit": true,
    // 其他编译选项
  }
}

开启noEmit后，TS只会执行类型检查逻辑，不会生成任何输出文件，自然不会出现文件覆盖的问题。

方法3：指定独立的输出目录 #

如果确实需要TS生成编译文件，给输出指定一个单独的目录，同时排除该目录和源文件的重叠：

{
  "compilerOptions": {
    "outDir": "./dist-ts",
    // 其他编译选项
  },
  "exclude": ["node_modules", "dist-ts"]
}

把编译产物放到dist-ts这类独立目录，和源文件（包括vite.config.js）的路径完全分开，就不会触发覆盖报错。

额外处理App.jsx的报错 #

添加tsconfig后App.jsx报错，大概率是TS开始对JS文件做类型检查导致的。如果不想让TS检查JS文件，可以在compilerOptions里添加：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    // 其他选项
  }
}

如果需要保留JS文件的类型检查，可以针对性调整strict、noImplicitAny等严格模式选项，降低检查强度。

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