从npm切换到pnpm后AngularJS项目出现TypeScript错误

核心问题分析 #

pnpm默认的依赖hoist策略和npm不同，不会将所有依赖都提升到顶层node_modules，这可能导致TypeScript无法正确找到@types/angular-mocks的类型定义，进而无法识别angular.mock这类扩展属性。

步骤1：确保依赖版本正确且安装到位 #

先确认@types/angular和@types/angular-mocks已添加到devDependencies，且版本匹配AngularJS的实际版本：

pnpm add -D @types/angular @types/angular-mocks

步骤2：调整tsconfig.json的类型配置 #

修改tsconfig.json的compilerOptions，明确指定要加载的类型，并确保TS能找到类型根目录：

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "target": "ES2017",
    "sourceMap": true,
    "inlineSources": true,
    "allowSyntheticDefaultImports": true,
    // 添加以下配置
    "types": ["angular", "angular-mocks"],
    "typeRoots": ["./node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

• types：强制TS加载指定的类型定义，确保angular-mocks对IAngularStatic的扩展生效
• typeRoots：明确告诉TS类型定义的查找位置，适配pnpm的依赖结构

步骤3：处理UMD全局冲突问题 #

不要用import导入全局类型，而是在使用angular.mock的文件顶部添加三斜线指令，或者开启全局UMD访问：

方案A：三斜线指令（推荐）

在需要使用angular.mock的文件开头添加：

/// <reference types="angular" />
/// <reference types="angular-mocks" />

方案B：全局开启UMD访问

如果项目中大量文件使用全局angular对象，可以在tsconfig.json中添加：

{
  "compilerOptions": {
    // ... 其他配置
    "allowUmdGlobalAccess": true
  }
}

步骤4：调整pnpm的hoisting策略 #

如果上述配置仍不生效，修改pnpm的hoist规则，让@types依赖被提升到顶层：
在项目根目录创建或修改.npmrc文件，添加：

hoist=types

这个配置会让pnpm将所有@types开头的依赖提升到顶层node_modules，和npm的行为更接近，确保TS能直接找到类型定义。

验证操作 #

执行以下命令清理并重新安装依赖，然后编译：

rm -rf node_modules
rm pnpm-lock.yaml
pnpm i --ignore-scripts
tsc

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