javascript - 是否可以使用构造函数作为 TypeScript 中另一个函数的参数类型？

Question

几天前我发现了一种 TypeScript 语言。根据视频评论，它对我来说看起来很有前途，因为它为 JavaScript 带来了适当的代码完成、隐式代码文档，并且可能使其更加类型安全。

我正在尝试用 TypeScript 重写一个简单的 AngularJS 应用程序。我想指定注入(inject)到 Controller 的参数类型。我们假设以下 JS 代码:

// service.js
angular.module('app').service('MyService', MyService);
function MyService() {
    this.test = function test() { console.log('test'); };
}

// controller.js
angular.module('app').controller('MyController', MyController);
function MyController($scope, MyService) {
    $scope.test = function test() { MyService.test(); };
}

我正在努力实现这样的目标:

// controller.ts
angular.module('app').controller('MyController', MyController);
function MyController($scope, MyService:MyService) {
    // ...
}

因此，使用 MyService 参数的代码完成来编写 Controller 代码会更容易。但是，此代码会使编译器发出错误 TS2304:找不到名称“MyService”。

我尝试了一些方法，发现至少有两种可能的解决方案。然而，它们似乎都不理想。

1) 创建一个附加接口(interface)，声明服务的所有方法。但这种方法需要大量额外的输入(实际上，我们两次定义具有完整签名的同一组方法，并且还必须在发生更改时更新一些内容)。当接口(interface)被多次实现时，这种方式完全没问题，但对于单个 AngularJS 服务来说就显得多余了。

2) 构造函数可以用类代替。这样就可以使用类的名称作为参数的类型。然而，这也导致了一些问题:

• typescript 编译器将类定义转换为闭包，并将其分配给使用 var 关键字声明的变量(至少对于 ES5 而言)。这要求 AngularJS 服务声明放置在文件最底部的类定义之后。它增加了忘记这样做的可能性。

  angular.module('app').service('MyService', MyService);
  class MyService {
      test() { console.log('test'); }
  }
  
  // becomes
  
  angular.module('app').service('MyService', MyService);
  var MyService = (function () {
      function MyService() {
      }
      MyService.prototype.test = function () { console.log('test'); };
      return MyService;
  }());
  

• 按照这种方式，我们必须将依赖项注入(inject)到服务的构造函数中。因此，每次使用依赖项时都需要指定多余的 this. 字符串。

那么，还有其他方法可以将构造函数作为另一个函数的参数类型传递吗？谢谢。

P.S.:我不知道是否有必要，但我正在使用 Sublime Text 3 以及官方 TypeScipt 插件和 gulp-typescript 进行编译。

Answer 1

是的，你可以做到这一点。请参阅working CodePen

class MyController
{
  static $inject = ['MyService','$scope'];

  constructor(private myService:MyService, private $scope:any){
    this.$scope.test = this.myService.test;
  }  
}

class MyService{  
  test(){ 
    console.log('test');
  }
}