Angular 15部分场景全局类型无法识别（找不到名称）

核心问题分析 #

你遇到的TS2304: 找不到名称'Person'，本质是Angular构建流程（基于tsconfig.app.json）没有正确识别你的全局自定义类型，而typeRoots主要用于第三方@types包的检索，对自定义全局类型的支持有限。通配符导入虽能解决问题，但会引入大量非必要文件导致编译警告。

精准解决方案 #

1. 规范全局类型声明文件 #

将你的Person类型定义在.d.ts后缀的文件中（比如src/types/person.d.ts），并通过declare global包裹，同时添加空导出确保TS识别为模块：

declare global {
  // 类型或接口定义
  type Person = {
    id: number;
    name: string;
    // 其他属性
  };

  // 如果是接口写法
  // interface Person {
  //   id: number;
  //   name: string;
  // }
}

// 必须添加空导出，否则全局声明不生效
export {};

2. 精准配置tsconfig.app.json的include #

避免使用全量通配符，仅将自定义类型目录纳入编译范围：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    // 保留原有编译配置
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.html",
    "src/types/**/*.d.ts" // 精准指定全局类型文件目录
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

3. 调整tsconfig.json的typeRoots（可选） #

typeRoots主要用于第三方类型包，可保留但无需依赖它加载自定义类型：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/types"],
    // 其他编译配置
  }
}

4. 服务中直接使用全局类型 #

完成上述配置后，在你的服务文件（src/domain/general/file.ts）中无需导入即可直接使用Person：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FileService {
  getPerson(): Person {
    return { id: 1, name: 'John Doe' };
  }
}

为什么之前的方案不生效？ #

• 未添加export {}的global.d.ts会被TS视为全局脚本而非模块，声明无法全局生效
• typeRoots仅针对@types命名空间下的第三方包，自定义类型无法通过该配置被Angular构建流程识别
• 全量通配符**/*.ts会将测试文件、未使用组件等全部纳入编译，从而产生大量无用警告

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