AngularJS项目VSCode中$scope、$http等DI服务无智能提示如何解决？

我之前在维护AngularJS项目时正好踩过这个坑——明明装了@types/angular，AngularJS本身的API有智能提示，但$scope、$http这些DI服务却被识别成any类型。给你整理几个亲测有效的解决办法：

1. 确保TypeScript正确识别@types依赖 #

VSCode有时候不会自动加载所有@types包，需要手动配置或声明：

• 配置tsconfig.json：在compilerOptions里添加"types": ["angular"]，强制TypeScript加载AngularJS的类型定义：

  {
    "compilerOptions": {
      "target": "ES5", // AngularJS项目通常适配ES5
      "module": "CommonJS",
      "types": ["angular"], // 关键配置
      "strict": true // 开启严格模式能更好地触发类型检查
    },
    "include": ["src/**/*"]
  }
  

• 添加三斜线引用（备选）：如果tsconfig配置后还是没效果，在你的主TS文件（比如app.ts）顶部加一行声明：

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

2. 给DI服务添加明确的类型注解 #

TypeScript无法自动推断AngularJS DI服务的类型，必须手动指定对应的接口：
@types/angular已经内置了所有核心服务的类型，比如IScope对应$scope，IHttpService对应$http，直接使用即可：

函数式控制器写法 #

angular.module('myApp').controller('MyController', function(
  $scope: angular.IScope,
  $http: angular.IHttpService
) {
  // 现在$scope的$watch、$apply等方法都有完整提示
  $scope.$watch('user', (newVal) => {
    console.log(newVal);
  });
  // $http的get/post方法也会自动提示参数和返回值类型
  $http.get('/api/users').then(res => {
    console.log(res.data);
  });
});

类式控制器写法（推荐） #

class MyController {
  // 用$inject数组声明依赖，避免压缩丢失
  static $inject = ['$scope', '$http'];
  
  constructor(
    private $scope: angular.IScope,
    private $http: angular.IHttpService
  ) {}

  fetchData() {
    this.$http.post('/api/data', { id: 1 }).then(res => {
      // 类型提示正常工作
      this.$scope.$apply(() => {
        this.$scope['data'] = res.data;
      });
    });
  }
}

angular.module('myApp').controller('MyController', MyController);

3. 刷新VSCode的TypeScript服务 #

有时候是编辑器缓存导致的类型信息未更新：
按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server，回车执行后重新打开文件，类型提示应该就会生效。

4. 匹配@types/angular与AngularJS版本 #

如果你的AngularJS版本和@types版本不兼容，也会出现类型缺失：
比如你用的是AngularJS 1.7.x，就安装对应版本的@types：

npm install --save-dev @types/angular@~1.7.0

避免安装最新的@types版本（可能对应未发布的AngularJS版本）导致类型不匹配。

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