如何配置app的tsconfig.json导入shared目录的TypeScript类型？

问题原因 #

你的App端TypeScript编译报错，核心原因是App的tsconfig.json限制了源码范围仅为src目录：

• 当前include数组只包含src/**/*，TypeScript会自动将app/src推断为唯一的rootDir
• shared目录位于app文件夹外部，不在TypeScript识别的源码范围内，因此编译器判定它不属于当前项目的源码文件

而Backend端正常，是因为它的tsconfig（位于项目根目录）的源码范围包含了lib和shared，rootDir被推断为项目根目录，自然能访问到shared。

解决方案 #

提供两种可行的配置方案，按需选择：

方案1：直接扩展源码范围（快速解决） #

修改App的tsconfig.json，将shared目录加入include数组：

{
  "include": [
    "src/**/*",
    "../shared/**/*" // 新增这一行
  ],
  // 其他编译选项保持不变
}

修改后，TypeScript会将项目根目录作为新的rootDir，此时你原来的相对路径导入../../shared/test.interface就能正常工作。

方案2：配置路径别名（更优雅的长期方案） #

通过paths配置别名，简化导入路径的同时规范代码结构：

1. 修改compilerOptions中的baseUrl和paths：

{
  "compilerOptions": {
    "baseUrl": "./", // 将基准路径设为App目录本身，方便访问上级目录
    "paths": {
      "@shared/*": ["../shared/*"] // 配置别名，@shared指向上级的shared目录
    },
    // 其他原有选项保持不变...
  },
  "include": [
    "src/**/*",
    "../shared/**/*" // 同样需要加入include范围
  ]
}

2. 之后导入shared中的类型时，就可以用更简洁的别名路径：

import { Test } from '@shared/test.interface';

注意事项 #

• 如果你的App使用了ESLint，需要同步修改ESLint的settings中的alias配置，确保ESLint能识别别名路径
• 若后续需要打包构建，需确保打包工具（如Vite、Webpack）也配置对应的路径别名映射，避免打包时找不到文件

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