Angular 12 使用自定义类型报TS2307无法找到模块问题求助

核心错误原因 #

1. typeRoots配置位置错误：该配置属于TypeScript原生的compilerOptions字段，你错误写在了angularCompilerOptions下，配置不会生效。
2. typeRoots路径错误：你写的/types是系统绝对路径，会读取系统根目录的types文件夹，无法识别项目内的自定义类型目录。
3. 类型未显式导入/全局声明：默认情况下.d.ts文件中带export的类型需要手动导入才能使用，你当前代码没有导入就直接使用了User类型。

具体解决方法 #

你可以二选一使用以下方案：

方案一：显式导入类型（推荐，可维护性更高） #

不需要修改tsconfig.json，直接在使用User类型的login.service.ts顶部导入对应类型即可，注意路径和文件名大小写与实际文件匹配：

// 根目录types文件夹下的user.d.ts，在src/app/login.service.ts中导入的路径如下
import { User } from '../../types/user';

导入完成后即可正常使用类型。

方案二：设置为全局通用类型（适合全项目通用的基础类型） #

如果你不想每次使用类型都手动导入，可以按以下步骤配置：

1. 将typeRoots配置移到tsconfig.json外层的compilerOptions字段下，修改路径为相对路径：

{
  "compilerOptions": {
    // 其他原有配置保留
    "typeRoots": [
      "./types",
      "node_modules/@types"
    ]
  },
  "angularCompilerOptions": {
    // 原有angular相关配置保留，删除这里的typeRoots
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

2. 修改types/user.d.ts的类型声明为全局声明，去掉export关键字：

declare interface User {
    id: string,
    password: string,
    name: string
}

3. 重启Angular开发服务，全项目所有文件都可以直接使用User类型，无需手动导入。

注意事项 #

• 文件名和导入路径的大小写要严格匹配，Angular编译环境大小写敏感，若文件名为user.d.ts，导入时写User会触发找不到模块错误。
• 修改tsconfig.json配置后必须重启ng serve才会生效。

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