WebStorm与TypeScript无法识别AngularJS中的依赖注入问题

我之前也碰到过一模一样的问题——用TypeScript写AngularJS组件和服务时，IDE（比如WebStorm）和TypeScript类型检查器总是没法正确识别依赖注入的类型，明明代码能正常运行，但就是没有代码提示甚至莫名报红。咱们一步步来搞定它：

1. 给服务补上清晰的类型定义并正确注册 #

首先，你的MyService需要明确的接口约束，而且要确保它被正确注册到Angular模块中，这样TypeScript和IDE才能把它和可注入服务关联起来：

// 定义服务接口，让类型约束更明确
interface IMyService {
  testfn(age: number): void;
}

class MyService implements IMyService {
  constructor() { }
  public testfn(age: number) {
    console.log(age);
  }
}

// 把服务注册到Angular模块，这一步是让注入器和类型系统建立关联的关键
angular.module('app')
  .service('MyService', MyService);

2. 给控制器的依赖添加显式类型注解 #

虽然你用了static $inject做依赖注入声明，但TypeScript没法自动推断注入对象的类型，所以得给构造函数里的参数加上明确的类型注解：

class MyComponentCtrl { 
  static $inject = ['MyService']; 
  // 这里加上IMyService类型注解，让TypeScript和WebStorm都能识别依赖的类型
  constructor(private MyService: IMyService) { 
    MyService.testfn(55); // 现在应该能看到代码补全，也不会有类型错误提示了
  } 
}

class MyComponent implements ng.IComponentOptions { 
  constructor() { 
    this.controller = MyComponentCtrl; 
    this.template = 'hello'; 
  } 
}

angular.module('app')
  .component('MyComponent', new MyComponent());

3. 配置WebStorm以完善AngularJS支持 #

WebStorm默认可能没完全开启AngularJS的适配，做这几步调整：

• 打开Settings > Plugins，搜索AngularJS插件，确保它处于启用状态
• 进入Settings > Languages & Frameworks > JavaScript > AngularJS，勾选「Enable AngularJS support」，并指定你的AngularJS根模块文件（就是定义angular.module('app')的那个文件）
• 如果还是有识别问题，试试File > Invalidate Caches...，选择「Invalidate and Restart」，让IDE重新索引项目，很多类型识别的小问题都能通过这个解决

4. 确保安装AngularJS的TypeScript类型定义 #

最后，要确保你的项目里装了官方的AngularJS类型包，这样TypeScript才能获得完整的AngularJS类型支持：

npm install @types/angular --save-dev

做完这些之后，你会发现TypeScript能正确检查MyService的方法调用，WebStorm也会提供对应的代码补全和类型提示，再也不会出现无法识别依赖注入的情况了。

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