TypeScript跨目录导入接口时避免生成额外目录结构的实现方案

你的问题核心在于TypeScript把接口导入当作了普通模块依赖，从而触发了依赖文件的编译输出。这里有个简单且直接的方法解决这个问题：

• 第一步：用import type替代普通import导入接口
  在pub目录的foo.ts里，把导入语句改成：

  import type { ApiResponseData } from '../sys/ApiResponse.ts';
  

  import type是TypeScript专门为导入类型（接口、类型别名等）设计的语法，它只会在类型检查阶段生效，编译成JavaScript时会被完全移除，不会留下任何依赖痕迹，自然也就不会触发sys目录文件的编译输出。

• 第二步：确保pub的tsconfig.json配置正确
  打开pub目录的tsconfig.json，检查以下配置项：

  {
    "compilerOptions": {
      "strict": true, // 确保类型检查严格，避免隐式类型问题
      "moduleResolution": "NodeNext", // 或Node16，适配现代模块导入规则
      "outDir": "../res/js", // 保持原来的输出目录配置
      "skipLibCheck": true // 可选，跳过第三方库的类型检查，加快编译速度
    },
    "include": ["*.ts"] // 只包含pub目录下的TS文件，避免意外编译sys目录的文件
  }
  

  这里的include配置很关键，它限定了TypeScript只编译pub目录下的文件，即使你导入了sys的类型，也不会把sys的文件纳入编译范围。

• 第三步：验证编译结果
  重新执行pub目录的TypeScript编译命令，你会发现输出目录还是/res/js/foo.js、/res/js/bar.js，不会出现/res/js/pub/或/res/js/sys/的额外目录，也不会生成ApiResponse.js文件。

备选方案：抽离共享类型到独立目录（如果需要更清晰的结构） #

如果后续有更多共享类型，你可以考虑创建一个单独的类型目录（比如/types），把ApiResponseData这类跨端共享的接口放到这里，然后在pub和sys的tsconfig里配置paths来简化导入：

1. 创建/types/ApiResponse.ts，把接口移到这里：

   export interface ApiResponseData { code?: number, title: string, ... }
   

2. 在pub和sys的tsconfig.json里添加paths配置：

   {
     "compilerOptions": {
       "paths": {
         "@types/*": ["../types/*"]
       }
     }
   }
   

3. 然后在pub的foo.ts里用import type { ApiResponseData } from '@types/ApiResponse.ts'导入，同样不会产生额外的编译文件。

这个方案适合类型较多、需要集中管理的场景，但如果只是单个接口，import type的方法更轻量。

内容的提问来源于stack exchange，提问作者Dizzy the Void