TypeScript+AngularJS扩展类失效：子类$scope未定义问题求助

嘿，我之前也踩过类似的AngularJS + TypeScript的坑！TypeScript编译器没报错但控制台炸$scope is undefined，这种情况几乎都是依赖注入（DI）配置不对或者基类与扩展类之间的$scope传递出了问题。给你几个具体的排查和解决方向：

1. 确保基类正确声明DI依赖 #

AngularJS的DI不会被TypeScript的类型检查自动验证，哪怕你给$scope加了类型注解，runtime还是需要明确的注入标记。你需要给基类添加静态$inject数组，或者用ngInject注释：

方案A：使用静态$inject数组 #

class BaseController {
  // 必须声明静态$inject数组，告诉AngularJS要注入的依赖
  static $inject = ['$scope'];
  constructor(protected $scope: ng.IScope) {}
}

方案B：使用ngInject注释 #

如果你的项目配置了支持ngInject（比如用babel插件或TS保留注释），可以这样写：

class BaseController {
  constructor(@ngInject() protected $scope: ng.IScope) {}
}

注意要确保tsconfig.json里removeComments设为false，不然注释会被编译掉，DI还是会失效。

2. 扩展类必须正确调用super()并传递$scope #

如果扩展类的构造函数没有调用super($scope)，基类里的$scope就会是undefined——TypeScript只会检查类型匹配，不会强制你传递参数。比如：

class ChildController extends BaseController {
  constructor(private $scope: ng.IScope) {
    // 关键：必须把$scope传给基类的构造函数
    super($scope);
    // 后续可以正常使用this.$scope（继承自基类）
  }
}

如果你的扩展类不需要额外的依赖，也可以直接复用基类的DI配置，不用重复声明$scope：

class ChildController extends BaseController {
  constructor(...args: any[]) {
    super(...args);
  }
}

3. 注册控制器时不要遗漏DI数组 #

就算你的类里声明了$inject，注册控制器时也要确保用正确的方式告诉AngularJS：

// 正确写法：带DI数组
angular.module('yourApp')
  .controller('ChildController', ['$scope', ChildController]);

// 或者如果类里已经有static $inject，也可以直接传类（但要确保minify时不会破坏DI）
angular.module('yourApp')
  .controller('ChildController', ChildController);

4. 避免在扩展类中意外覆盖$scope #

如果扩展类里重新声明了$scope但没有赋值，会覆盖基类的$scope导致其变为undefined：

// 错误示例：重新声明$scope但未赋值
class ChildController extends BaseController {
  $scope: ng.IScope; // 这里会覆盖基类的protected $scope，初始为undefined
  constructor($scope: ng.IScope) {
    super($scope);
    // 必须手动赋值，或者干脆不要重新声明
    this.$scope = $scope;
  }
}

总结 #

TypeScript的类型检查只保证静态类型的正确性，但AngularJS的DI是runtime层面的机制，所以编译器不会帮你发现这类问题。核心解决思路就是：

• 确保基类和扩展类的DI配置正确
• 扩展类必须通过super()把$scope传递给基类
• 注册控制器时遵循AngularJS的DI规则

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