用类构建AngularJS指令：TypeScript样板代码简化方法咨询

嘿，这个问题我太熟了——AngularJS + TypeScript初期确实容易写一堆重复的样板代码，不过有几个很棒的技巧能帮你大幅减少冗余：

1. 利用TypeScript参数属性（最直接的简化） #

TypeScript的参数属性特性可以让你把类属性声明、构造函数赋值一步完成，不用单独在类顶部定义属性，也不用在构造函数里写this.$http = $http这种重复代码。结合AngularJS的$inject，代码会清爽很多：

class AService {
  static $inject = ['$http', '$state'];
  // 用public/private修饰符标记参数，TS自动创建类属性并赋值
  constructor(public $http: any, public $state: any) {}

  // 后面直接用this.$http、this.$state即可
}

2. 结合构建工具自动生成$inject（彻底省去$inject） #

如果你的项目用了AngularJS 1.5+，可以借助ngAnnotate或者Webpack/Gulp的注解插件（比如babel-plugin-angularjs-annotate），这样连$inject数组都不用手动写了！工具会在构建时自动帮你添加依赖注入注解：

class AService {
  // 直接用参数属性，不用写$inject
  constructor(public $http: any, public $state: any) {}
}

只要构建流程配置了注解工具，AngularJS就能正常识别依赖，完全省去手动维护$inject的麻烦。

3. 用TypeScript装饰器封装依赖注入（更优雅的复用方式） #

如果你想让代码更具声明式风格，可以自定义一个装饰器来处理依赖注入的注解，需要在tsconfig.json里启用experimentalDecorators选项：

// 自定义Inject装饰器
function Inject(...dependencies: string[]) {
  return function(target: Function) {
    target.$inject = dependencies;
  };
}

// 使用装饰器标记依赖
@Inject('$http', '$state')
class AService {
  constructor(public $http: any, public $state: any) {}
}

这种方式把依赖声明和类逻辑分离，装饰器还能在多个服务里复用，代码结构更清晰。

小提示 #

• 如果不需要外部访问这些依赖，可以把public换成private，增强封装性；
• 尽量给$http、$state加上更具体的类型（比如引入@types/angular后用angular.IHttpService、angular.ui.IStateService），比any更安全。

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