子目录@types/react为何影响上层目录？如何实现隔离？

原因 #

TypeScript的类型查找逻辑会向上遍历所有父目录的node_modules，只要找到匹配的@types包就会加载。所以Vue项目根目录下的TypeScript在解析类型时，会遍历到src/react_app/node_modules里的@types/react，将其当成全局类型引入，从而干扰上层Vue项目的类型检测。

解决办法 #

• 在react_app的tsconfig.json里明确指定类型根目录，限制TypeScript只在当前子项目的node_modules里查找类型：

  {
    "compilerOptions": {
      "typeRoots": ["./node_modules/@types"]
    }
  }
  

• 在上层Vue项目的tsconfig.json里排除子目录，让上层项目的TypeScript完全忽略react_app的内容：

  {
    "exclude": ["src/react_app/**/*"]
  }
  

• 如果子项目不需要和Vue项目共享编译环境，直接把react_app目录移到Vue项目根目录外面，彻底隔离两个项目的依赖，从根源避免冲突。

内容的提问来源于stack exchange，提问作者梅花三十三